Checkbox plays an important role in web applications when you wish your users to choose from numerous options. It only allows users to make multiple choices on a website. Hence, today we are going to help you to check or uncheck checkbox using jQuery.

With the help of jQuery prop() method, you can use it to check or uncheck a checkbox dynamically.

To check a checkbox using jQuery

$(‘input:checkbox[name=checkme]’).attr(‘checked’,true);

To uncheck a checkbox using jQuery

$(‘input:checkbox[name=checkme]’).attr(‘checked’,false);

Syntax of prop()

// Check #x

$( “#x” ).prop( “checked”, true );

// Uncheck #x

$( “#x” ).prop( “checked”, false );

Example using prop() method

The below example to show how to check and uncheck a particular checkbox using the simple jQuery method.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".check").click(function(){
        $("#myCheck").prop("checked", true);
    });
    $(".uncheck").click(function(){
        $("#myCheck").prop("checked", false);
    });
});
</script>

Check/Uncheck all Checkboxes using jQuery

(“:checkbox”) selector can be used to select all the checkboxes in a page. Let us see the example how to use it and all;

<script>
         $(document).ready(function() {
             // Check All
             $('.checkall').click(function() {
                 $(":checkbox").attr("checked", true);
             });
             // Uncheck All
             $('.uncheckall').click(function() {
                 $(":checkbox").attr("checked", false);
             });
         });
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *