[Special Summer Sale] 40% OFF All Magento 2 Themes

VIEW OFFER

Cart

How do I check whether a checkbox is checked in jQuery?

Home TopicHow do I check whether a checkbox is checked in jQuery?
  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 31 total)
1 2 3
  • Author
    Posts
  • April 14, 2015 at 10:17 am #9003
    David Hoang
    Keymaster

    This function is alternative and stable:

    $('#isAgeSelected').context.checked
(return True/False)

    Example: 

    if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
    /*.....*/
}else{
    /*.....*/
}
    June 24, 2015 at 9:13 am #9004
    David Hoang
    Keymaster
    $('#chk').change(function() { 
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');
    June 29, 2015 at 8:42 am #9006
    David Hoang
    Keymaster

    For older versions of jQuery, I had to use following,

    $('#change_plan').live('click', function() {
     var checked = $('#change_plan').attr('checked');
     if(checked) {
          //Code       
     }
     else {
          //Code       
     }
});
    September 4, 2015 at 12:42 pm #9019
    David Hoang
    Keymaster

    Try this, 

    $('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    } 
});
    April 29, 2016 at 2:30 am #9001
    David Hoang
    Keymaster
    if($('#isAgeSelected').prop('checked')) {
    // do your action 
}
    September 30, 2016 at 5:30 am #9009
    David Hoang
    Keymaster

    What about this solution?

    $("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();
    May 19, 2017 at 6:03 am #9015
    David Hoang
    Keymaster

    I’m using jQuery 1.11.1 and I had troubles with setting and reading checkbox value as well.

    I finally solved it by these two functions:

    function setCheckboxValue(checkBoxId, checked) {
    if (checkBoxId && (checked === true || checked === false)) {
        var elem = $('#' + checkBoxId);
        if (checked === true) {
            elem.attr('checked', 'checked');
        } else {
            elem.removeAttr('checked');
        }
    }
}

function isChecked(checkBoxId) {
    return $('#' + checkBoxId).attr('checked') != null;
}

    It might looks a little bit dirty but it solves all the wired issue I had among different types of browsers.

    July 14, 2018 at 2:47 am #9025
    David Hoang
    Keymaster

    Simply use it like below

     $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });
    August 7, 2018 at 4:23 am #9007
    David Hoang
    Keymaster

    In case you need to know if a checkbox is checked in pure javascript you should use this code . 

    let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
    alert("element is checked");
} else {
    alert("element is  ot checked");
}
    September 3, 2018 at 1:56 am #9010
    David Hoang
    Keymaster

    I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery.

    E.X –

    1) Run On load to get checkbox value if the age checkbox is checked, then I need to show a text box to enter age, else hide the text box.

    2) if the age checkbox is checked, then I need to show a text box to enter age, else hide the text box using click event of checkbox.

    so code not returns false by default:

    Try the following:

    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) {
                $('#Age').show();
            } else {
                $('#Age').hide();
            }   
            $('#isAge').click(function() {
                if(document.getElementById('isAge').checked) {
                    $('#Age').show();
                } else {
                    $('#Age').hide();
                }
            }); 
            </script>
        </body>
    </html>

    Here is a modified version : https://jsfiddle.net/sedhal/0hygLtrz/7/

    September 11, 2018 at 7:51 am #9027
    David Hoang
    Keymaster

    Using pure JavaScript:

    let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
    March 29, 2019 at 9:54 am #9016
    David Hoang
    Keymaster

    You Can Try This code: 

    $('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
    August 28, 2019 at 11:39 am #9011
    David Hoang
    Keymaster

    In pure js checkbox state is easier to read

    isAgeSelected.checked

    function check() {
  txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<button onclick="check()">Check</button>

<div id="txtAge" style="display:none">
Age is selected
</div>
    December 9, 2019 at 7:19 am #9012
    David Hoang
    Keymaster

    Hi you can use plain Javascript, like so:

    document.getElementById('checkboxOption').addEventListener('click',      
   event => console.log(event.target.checked)
);
    <label><input type="checkbox" id="checkboxOption">Check Option</label>
    October 1, 2022 at 5:48 am #9014
    David Hoang
    Keymaster
    $(document).on('change', '#isAgeSelected', function() {

    if($(this).is(":checked")){

       $('#txtAge').hide();
    }
    else
    {
        $('#txtAge').hide();
    }
});
  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 31 total)
1 2 3
  • You must be logged in to reply to this topic.