locked
whether a checkbox is checked in jQuery? RRS feed

  • Question

  • User-118859203 posted

    I need to check the checked property. But the following code returns false by default. 

    if ($('#isHeightSelected').attr('checked'))
    {
        $("#txtHeight").show();
    }
    else
    {
        $("#txtHeight").hide();
    }

    How to successfully make checked property? Thanks.
    Monday, December 3, 2018 7:31 AM

Answers

  • User-552477072 posted

    Hi KamalHussain,

    $('#isHeightSelected') returns collection, replace it with: $('#isHeightSelected')[0].checked 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:35 AM
  • User-552477072 posted

    Actually, jQuery selectors return array. So, you can use $('#isHeightSelected')[0].checked

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:40 AM
  • User-552477072 posted

    You also can use

    if(document.getElementById('isHeightSelected').checked) {
        $("#txtHeight").show();
    } else {
        $("#txtHeight").hide();
    }

    Then checked property of a checkbox DOM element will give you checked state

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:44 AM
  • User-552477072 posted

    Hi toggle supposed to be fine.

    You can try with

    $("#txtHeight").toggle($("#isHeightSelected").is(':checked'))

    or, you can be stick with

    if($("#isHeightSelected").is(':checked'))
        $("#txtHeight").show();  // checked
    else
        $("#txtHeight").hide();  // unchecked

    If it helps pls don't forget to "Mark as Answer". Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:54 AM

All replies

  • User-552477072 posted

    Hi KamalHussain,

    $('#isHeightSelected') returns collection, replace it with: $('#isHeightSelected')[0].checked 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:35 AM
  • User-118859203 posted

    Thanks Rubaiayt2009,

    but why not $('#isHeightSelected').checked ?

    Monday, December 3, 2018 7:37 AM
  • User-552477072 posted

    Actually, jQuery selectors return array. So, you can use $('#isHeightSelected')[0].checked

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:40 AM
  • User-552477072 posted

    You also can use

    if(document.getElementById('isHeightSelected').checked) {
        $("#txtHeight").show();
    } else {
        $("#txtHeight").hide();
    }

    Then checked property of a checkbox DOM element will give you checked state

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:44 AM
  • User-552477072 posted

    You can use Toggle as well:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="checkbox" id="isHeightSelected"/>
    <div id="txtHeight" style="display:none">....</div>

    $('#isHeightSelected').click(function() {
        $("#txtHeight").toggle(this.checked);
    });

    Monday, December 3, 2018 7:48 AM
  • User-118859203 posted

    I have tried with toggle, but it returns false only

    Monday, December 3, 2018 7:49 AM
  • User-552477072 posted

    Hi toggle supposed to be fine.

    You can try with

    $("#txtHeight").toggle($("#isHeightSelected").is(':checked'))

    or, you can be stick with

    if($("#isHeightSelected").is(':checked'))
        $("#txtHeight").show();  // checked
    else
        $("#txtHeight").hide();  // unchecked

    If it helps pls don't forget to "Mark as Answer". Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2018 7:54 AM