Jquery is checked doesn't get trigger - javascript

http://jsfiddle.net/1uvL7tcm/
$(document).ready(function () {
if ($('#plainText').is(':checked')) {
alert('checked');
}
});
What's wrong with my code? the alert doesn't get trigger.

Try http://jsfiddle.net/1uvL7tcm/3/
You need to bind to all checkbox elements change event as such:
$("input[type=checkbox]").change(function(){
if ($(this).is(":checked")){
alert('checked');
}
});

The code you have runs once, when the page loads. If your checkbox is checked by default, you will get the alert. I modified your jsFiddle to have it checked by default and you get the alert: http://jsfiddle.net/1uvL7tcm/2/
If what you're looking for is to have this code triggered anytime a checkbox is changed, you will have to add a change handler:
$('input[name="checkbox"]').change(function() {
if ($(this).is(':checked')) {
alert('checked');
}
});

In your case the checked condition is only checked once when the dom ready event is fired... what you need is to check the condition whenever the checked state is changed... for that you need to write a handler for the change event using change() method from jQuery.
Since you want the same handler to be fired for all checkboxes, you can use a common attribute among all the three checkboxes which is its name as a selector. So
$(document).ready(function () {
$('input[name="checkbox"]').change(function () {
if (this.checked) {
alert('checked: ' + this.value);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" id="plainText" value="status">
<label for="plainText">Status</label>
<input type="checkbox" name="checkbox" id="image" value="Images">
<label for="image">Images</label>
<input type="checkbox" name="checkbox" id="video" value="Video">
<label for="video">Video</label>

Try This..
$('#plainText').on('click',function(){
if ($('#plainText').is(':checked')) {
alert('checked');
}
});

Try this...
$(document).ready(function(){
$("input[type=checkbox]").change(function(){
if ($("#plainText").is(":checked")){
alert('checked');
}
});
});

Related

Unable to successful detect click or change events on a checkbox

Problem: Unable to successful detect click or change events on a checkbox.
Intent: The overall intent is to detect a change or click on a checkbox and then use jquery’s show and hide methods to display / hide elements.
My approaches so far include the following:
Method 1: Onclick Handler
HTML
<div class="col-md-1"><center>
<label><p>Recurring</p>
<input type="checkbox" onclick="toggleRecur()"></input></label></center>
</div>
JAVASCRIPT
function toggleRecur(){
console.log("something clicked"); }
Method 2: jquery EventListener
HTML
<div class="col-md-1"><center>
<label><p>Recurring</p>
<input type="checkbox" id="task_recur" ></input></label></center>
</div>
Javascript/jquery
$(document).on("checked","#task_recur",function(){
alert("something checked");
});
Method 3: jquery Listener 2
$('input[id=task_recur]').change(function(){
if($(this).is(':checked'))
alert("czech it");
});
Unfortunately, none of the above worked, whether inside or out of the document load. I'm currently running under chrome. Any help would be so appreciated!
First Option
function toggleRecur(){
alert("something clicked"); }
<div class="col-md-1"><center>
<label><p>Recurring</p>
<input type="checkbox" onclick="toggleRecur()"></input></label></center>
</div>
2nd option
document.getElementById('task_recur').onclick = function() {
alert("something checked");
}
<div class="col-md-1"><center>
<label><p>Recurring</p>
<input type="checkbox" id="task_recur" /></label></center>
</div>
I can see bug in only,
$(document).on("change", "#task_recur", function () { // event should be change not checked
alert("delegated event");
});
Also,
if($(this).is(':checked')) can be replaced with simply if(this.checked) {}
DEMO
With pure javascript:
document.getElementById('task_recur').onclick = function() {
if (this.checked) {
alert("Checked);
}
};
With jquery:
$(document).on("change", "#task_recur", function(){
alert("something checked");
});
$('#task_recur').change(function() {
if($(this).is(':checked'))
alert("czech it");
});

Checkbox fire a function if checked and a different function if not checked

Hi i have got a checkbox and when i click it and check the box a function runs, which works just how i want it to.. now i want to run a DIFFERENT function if it is checked off but it is just running the same function everytime.
<input type="checkbox" class="no-custom" onclick="CheckBox()">
function CheckBox() {
$("#emailMain").css({"display": "none"});
$("#emailSame").css({"display": "inline"});
var Mainemail = Customer().email['#text']();
Contact().email = Mainemail;
EmailHolder(Mainemail);
}
Any ideas in the best way to sort this?
Firstly, if you've included jQuery in your page you should use it to attach your events as its a better separation of concerns. You can then use the checked property of the element to determine which function to call:
<input type="checkbox" class="no-custom" />
$('.no-custom').change(function() {
if (this.checked) {
// do something...
}
else {
// do something else...
}
});
Add an ID to the checkbox:
<input type="checkbox" id="the-checkbox" class="no-custom" onclick="CheckBox()">
Then add an event listener for when it changes:
$(function() {
$('#the-checkbox').change(function() {
if($(this).is(':checked')) {
oneFunction();
}
else {
anotherFunction();
}
});
function oneFunction() {
}
function anotherFunction() {
}
});
You can easily check if the checkbox is checked using jQuery is.
<input type="checkbox" class="no-custom" onclick="CheckBox(this)">
function CheckBox(cb) {
if ($(cb).is(":checked")) {
alert("Checked");
CheckedFunction();
} else {
alert("Unchecked");
UncheckedFunction
}
}

Working With checkboxes in the web pages

I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.
Here is what I am using::
So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
In View page I have declared::
function Checkme(class_Name) {
Check_OR_Uncheck(class_Name);
}
In Common js::
function Check_OR_Uncheck(class_Name) {
$("." + class_Name).click(function () {
if ($(this)[0].checked) {
$("." + class_Name).each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
}
else {
$(this)[0].checked = false;
}
});
}
Please Help me to achieve this..
Keep your code in the document ready event. This will register the click event for "myclass".
$(".myclass").click(function () {
if ($(this)[0].checked) {
$(".myclass").each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
} else {
$(this)[0].checked = false;
}
});
jsfiddle
You could use document ready handler and call method:
jsFiddle
$(function(){
$(':checkbox:checked').each(function(){
Checkme(this.className);
});
});
Try this
$(function(){
$('.myclass').click(function(){
var s=$(this).prop('checked');
if(s==true)
{
$('.myclass').prop('checked',false)
$(this).prop('checked',true)
}
});
});
Or
You simply can use
if(s==true)
{
$(this).siblings().prop('checked',false);
}
FIDDLE
Try this
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).
The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516

JQuery script for one checkbox selection from group not working while adding a checkbox dynamically

i'm using the below jquery script to disable user from selecting more than 1 check box of same name at a time
$("input:checkbox").click(function () {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
And here is the check boxes
<div class="ChekMarkWrap">
<input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />film
</div>
<div class="ChekMarkWrap">
<input id="chkTv_4" type="checkbox" name="four" /><br />tv
</div>
<div class="ChekMarkWrap">
<input id="chkWeb_4" type="checkbox" name="four" /><br />web
</div>
<div class="ChekMarkWrap">
<input id="chkStage_4" type="checkbox" name="four" /><br />stage
</div>
It works well and good until i add a new check box dynamically.i'm binding the above jquery script on document.ready()
Fiddle: http://jsfiddle.net/3hcFp/2/
That method binds the click event only once, so elements added after that code has been run will not have the event bound. What you need to do is set up a listener instead, like so:
$('body').on('click', 'input:checkbox', function () {
// Do some stuff
}
In the fiddle, i have wrapped the checkboxes in a form#exampleForm, and replaced body in the above example with that.
EDIT: Updated fiddle with live example of adding more checkboxes.
Try like this:
$("body").on('click',input:checkbox,function () {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
When you add new content you need to append it to the DOM.
But you can target a parent element that was not added after the DOM was loaded to be able to reference/attach-event to it using .on() and passing the selector as I wrote above on the first line of your code..
You should use delegated events. Your code is running on document ready. Nothing is bound to new elements.
$("your-form-selector").on('click', ':checkbox', function(){
//your code here.
});
You can try using delegates. Something like this:
$(".ChekMarkWrap").delegate('click','input:checkbox',function () {
//your functionality
});
For Reference: jQuery Documentation

Radio Button Check

I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!
Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO
Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}
Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/
Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});
if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected
Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO
Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}

Categories