Monday 14 December 2015

Set Checkbox checked or unchecked using jQuery

Set Checkbox checked or unchecked using jQuery

                or
               
How to check checkbox is checked or unchecked using jQuery



Case 1    :    Single Checkbox using Id attribute


Html    :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
   
    <p id="check">Click me<p>

    <input type ="checkbox" name="chk_1" checked id="chk_1" value="1" /><label for="chk_1">Checkbox 1</label>
   
</body>
</html>

Script    :

    $('#check').on('click',function(){
        $("#chk_1").prop('checked', false); // Unchecks it
    })


--------------------------------------------------------------   X ---------------------------------------------------------------


Case 2    :    Multiple Checkboxes Using Class attribute

 Html    :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

    <p id="check">Click me<p>

    <input type ="checkbox" name="chk_1" checked id="chk_1" value="1" class="mychechkbox"/><label for="chk_1">Checkbox 1</label>
    <input type ="checkbox" name="chk_2" checked id="chk_2" value="1" class="mychechkbox"/><label for="chk_2">Checkbox 2</label>
    <input type ="checkbox" name="chk_3" checked id="chk_3" value="1" class="mychechkbox"/><label for="chk_3">Checkbox 3</label>
    <input type ="checkbox" name="chk_4" checked id="chk_4" value="1" class="mychechkbox"/><label for="chk_4">Checkbox 4</label>

</body>
</html>


Script    :

    $('#check').on('click',function(){
        $(".mychechkbox").prop('checked', false); // Unchecks it
    })


--------------------------------------------------------------   X ---------------------------------------------------------------


Case 3    :    Single Checkbox Using name attribute

 Html    :

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>

    <p id="check">Click me<p>

    <input type ="checkbox" name="chk_1" checked id="chk_1" value="1" /><label for="chk_1">Checkbox 1</label>
     
    </body>
    </html>

Script    :


    $('#check').on('click',function(){
        $("input[name='chk_1']:checkbox").prop('checked', false); // Unchecks it
    })
   
   

No comments:

Post a Comment