simultaneously check and uncheck checkboxes

Question

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>

Duplicate: https://stackoverflow.com/questions/4177159/toggle-checkboxes-on-off — Tran Audi, Jul 30 '18 at 10:23
Possible duplicate of [Toggle Checkboxes on/off](https://stackoverflow.com/questions/4177159/toggle-checkboxes-on-off) — Kamalesh M. Talaviya, Jul 30 '18 at 10:30

score 1 · Answer 1 · answered Jul 30 '18 at 10:21

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>

score 0 · Answer 2 · answered Jul 30 '18 at 10:28

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>

You can apply this function on multiple areas – azizsagi Jul 30 '18 at 10:28 — azizsagi, Jul 30 '18 at 10:28

simultaneously check and uncheck checkboxes

2 Answers2