ChatGPT解决这个技术问题 Extra ChatGPT

Check if checkbox is checked with jQuery

How can I check if a checkbox in a checkbox array is checked using the id of the checkbox array?

I am using the following code, but it always returns the count of checked checkboxes regardless of id.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}
a checkbox array means something like: etc..
what's wrong with a checkbox array? how else would you do a "check all that apply" input?
Make sure your id s are unique! name can (and should, in this case) repeat, but you'll find a lot of weird things going on if you duplicate the id! =D
ignore previous comment, it should be return checked !== 0

K
Kaspar Lee
$('#' + id).is(":checked")

That gets if the checkbox is checked.

For an array of checkboxes with the same name you can get the list of checked ones by:

var $boxes = $('input[name=thename]:checked');

Then to loop through them and see what's checked you can do:

$boxes.each(function(){
    // Do stuff here with this
});

To find how many are checked you can do:

$boxes.length;

Another way is $('#'+id).attr('checked'), which is equivalent to $('#' + id).is(":checked") but easier to remember IMO.
@Zubin: Be careful with .attr('checked'). Its behavior changed in jQuery 1.6. It used to return false or true. Now it returns undefined or "checked". .is(':checked') does not have this problem.
@John Boker: sorry for the necro comment but, why is it that $('.ClassName').is(':checked') doesn't seem to work but $('#' + id).is(":checked") does? aside from the fact that one looks up by id and one by classname.
Note: size() has been deprecated since jQuery 1.8 - use .length instead
$('#'+id).prop('checked') will return either true or false.
d
depankur rawat

IDs must be unique in your document, meaning that you shouldn't do this:

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Instead, drop the ID, and then select them by name, or by a containing element:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

And now the jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

Why use $('#checkArray :checkbox:checked').length > 0; when the more simple $('#checkArray').checked works and is available on more versions?
@Oddman it does work, just not on a jquery object. instead of $(elem).checked, try elem.checked.
@DanWilliams yes but not in the example mmcrae gave.
@AlejandroQuiroz I used to not omit the double quotes in jquery selector too. but recently I think it's quite useful because it improves code readibility and to avoid errors when the name or class contains a minus - sign
B
Bellash
$('#checkbox').is(':checked'); 

The above code returns true if the checkbox is checked or false if not.


very useful when using $(this).is(':checked'); Thanks!
This worked for me, I used this before var isChecked = $('#CheckboxID').attr('checked') ? true : false; but did not return always correct value. So thanks!
j
justnajm

All following methods are useful:

$('#checkbox').is(":checked")

$('#checkbox').prop('checked')

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

It is recommended that DOMelement or inline "this.checked" should be avoided instead jQuery on method should be used event listener.


J
Jefrey Sobreira Santos

jQuery code to check whether the checkbox is checked or not:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

Alternatively:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

The first solution is missing :... Correct one is: if(('input[name="checkBoxName"]').is(':checked')).
Missing dollar sign ($), it should be if($('input[name="checkBoxName"]').is(':checked')).
The second one will never run the else block, since a jQuery object, even if it contains no matching elements, is "truthy". Add .length to the end, then you're talking.
T
Techie

The most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property

All below methods are possible

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

L
Leniel Maccaferri

This is also an idea I use frequently:

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

If cheked, it'll return 1; otherwise it'll return 0.


M
Mohammed Shaheen MK

You can use this code,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

S
Subodh Ghulaxe

As per the jQuery documentation there are following ways to check if a checkbox is checked or not. Lets consider a checkbox for example (Check Working jsfiddle with all examples)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Example 1 - With checked

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Example 2 - With jQuery is, NOTE - :checked

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Example 3 - With jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Check Working jsfiddle


C
Combine

I know the OP want jquery but in my case pure JS was the answer so if anyone like me is here and do not have jquery or do not want to use it - here is the JS answer:

document.getElementById("myCheck").checked

It returns true if the input with ID myCheck is checked and false if it is not checked.

Simple as that.


meaning that $("#myCheck")[0].checked will work in jquery! :D
M
Muhammad Reda

You can try this:

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />

This is no longer a good way of doing things, as attr only reflects the attribute value in HTML, not the property value in the DOM. See the documentation for attr, where it says "To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.", and the documentation for prop, where it says "The .prop() method should be used to set disabled and checked instead of the .attr() method."
e
endur

You can use any of the following recommended codes by jquery.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};

A
Aamir Shahzad

You can do it simply like;

Working Fiddle

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

or even simpler;

$("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

If the checkbox is checked it will return true otherwise undefined


or even simpler; -> $("#checkbox").checked
i
infomasud
$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

This code above works also on bootstrap modal. isChecked is true or flase ;


M
Muhammad Reda

Simple Demo for checking and setting a check box.

jsfiddle!

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});

C
Community

Just to say in my example the situation was a dialog box that then verified the check box before closing dialog. None of above and How to check whether a checkbox is checked in jQuery? and jQuery if checkbox is checked did not appear to work either.

In the end

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

This worked so calling the class then the ID. rather than just the ID. It may be due to the nested DOM elements on this page causing the issue. The workaround was above.


A
Aniket Thakur

For checkbox with an id

<input id="id_input_checkbox13" type="checkbox"></input>

you can simply do

$("#id_input_checkbox13").prop('checked')

you will get true or false as return value for above syntax. You can use it in if clause as normal boolean expression.


B
BlackPanther

Actually, according to jsperf.com, The DOM operations are fastest, then $().prop() followed by $().is()!!

Here are the syntaxes :

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

I personally prefer .prop(). Unlike .is(), It can also be used to set the value.


A
Abdul Hamid

Something like this can help

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}

s
sourceboy

Toggle checkbox checked

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})

o
oscar castellon

Try this...

$(function(){
  $('body').on('click','.checkbox',function(e){
    
    if($(this).is(':checked')){
      console.log('Checked')
    } else {
      console.log('Unchecked')
    }
  })
})

P
Parth Patel

Using this code you can check at least one checkbox is selected or not in different checkbox groups or from multiple checkboxes. Using this you can not require to remove IDs or dynamic IDs. This code work with the same IDs.

Reference Link

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

Basic information : html element ids not repeat ( eg: id="checkbox2", id="checkbox3" ). This is not a good practice. We can use class multiple times in a page.
G
Grant

Since it's mid 2019 and jQuery sometimes takes a backseat to things like VueJS, React etc. Here's a pure vanilla Javascript onload listener option:

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>

K
Kamil Kiełczewski

Your question is not clear: you want to give "checkbox array id" at input and get true/false at output - in this way you will not know which checkbox was checked (as your function name suggest). So below there is my proposition of body of your isCheckedById which on input take checkbox id and on output return true/false (it's very simple but your ID should not be keyword),

this[id].checked

function isCheckedById(id) { return this[id].checked; } // TEST function check() { console.clear() console.log('1',isCheckedById("myCheckbox1")); console.log('2',isCheckedById("myCheckbox2")); console.log('3',isCheckedById("myCheckbox3")); }


S
Sp0T

use code below

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>

Really? How about $(function() { $("[id$='chkSendMail']").on("change", ShowMailSection); });

关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now