CODEWITHSUNDEEP
jquerycheckbox
Tom
Tom

Reputation: 3

simultaneously check and uncheck checkboxes

Using jquery how do i check and uncheck checkbox2 when checking and unchecking checkbox1?

<div>
    <input class="checkboxes" id="checkbox1" name="checkboxgroup" type="checkbox" value="First checkbox">
    <label for="checkbox1">First checkbox</label>
  </div>
  <div>
    <input class="checkboxes" id="checkbox2" name="checkboxgroup" type="checkbox" value="Second checkbox">
    <label for="checkbox2">Second checkbox</label>
  </div>
  <div>
    <input class="checkboxes" id="checkbox3" name="checkboxgroup" type="checkbox" value="Third checkbox">
    <label for="checkbox3">Third checkbox</label>
  </div>

Upvotes: 0

Views: 258

Answers (2)

azizsagi
azizsagi

Reputation: 276

there you go a running solution.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

function check()
{

   if($('#checkbox2').is(":checked"))
      {
        $('#checkbox1').prop('checked',true);

      }
      else
      {
         $('#checkbox1').prop('checked',false);
      }

  } 

</script>
</head>
<body>

<div>
    <input class="checkboxes" id="checkbox1" name="checkboxgroup" type="checkbox" value="First checkbox" >
    <label for="checkbox1">First checkbox</label>
  </div>
  <div>
    <input class="checkboxes" id="checkbox2" name="checkboxgroup" type="checkbox" value="Second checkbox" onclick="check();">
    <label for="checkbox2">Second checkbox</label>
  </div>
  <div>
    <input class="checkboxes" id="checkbox3" name="checkboxgroup" type="checkbox" value="Third checkbox">
    <label for="checkbox3">Third checkbox</label>
  </div>
</body>
</html>

Upvotes: 0

Zenoo
Zenoo

Reputation: 12880

You can listen to the change event on your first checkbox and set the checked property of your second checkbox to the opposite of its current state :

$('#checkbox1').on('change', function() {
  $('#checkbox2').prop('checked', !$('#checkbox2').is(':checked'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input class="checkboxes" id="checkbox1" name="checkboxgroup" type="checkbox" value="First checkbox">
  <label for="checkbox1">First checkbox</label>
</div>
<div>
  <input class="checkboxes" id="checkbox2" name="checkboxgroup" type="checkbox" value="Second checkbox">
  <label for="checkbox2">Second checkbox</label>
</div>

Upvotes: 1

Related Questions