CODEWITHSUNDEEP
jquerycheckbox
Yannick
Yannick

Reputation: 19

Jquery multiple checkboxes with same id issue

I have this problem with multiple checkboxes with the samen id (#group) if one of these checkboxes is checked another checkbox with the id (#user) should be checked as well. The problem is that with $this it works like a charm but then again you have also the checkboxes without the #group id. I made this fiddle to demonstrate the problem.

https://jsfiddle.net/njcw9Lav/1/

here is the simple Jquery

$('input').on('change', function() {
  var totalSeen = $("input#group:checked").length;
  if ($('#group').prop("checked")) {
    $('#user').prop('checked', true);
    return;
  } else if (totalSeen == 0) {
    $('#user').prop('checked', false);
    return;
  }
});

Upvotes: 0

Views: 8779

Answers (3)

Madhavi Krishnayya
Madhavi Krishnayya

Reputation: 39

I have created four check boxes with same group as shown below,

<body>
<div>
<input type="checkbox" name="group1"/> 1
<input type="checkbox" name="group1"/> 2
<input type="checkbox" name="group1"/> 3
<input type="checkbox" name="group1"/> 4
</div>
</body>

and below is my js code that marks all the check boxes as checked/unchecked accordingly when you check/uncheck any of the check box

$("input[name='group1']").click(function(){
$("input[name='group1']").prop('checked', $(this).prop('checked'));
});

Hope this helps!!

Upvotes: 0

Mehdi Bouzidi
Mehdi Bouzidi

Reputation: 1985

First of all you can't give the same id to multiple HTML ELEMENTS you should use class instead, so this:

    <input type="checkbox" class="edit-checkbox" name="groups[]" value="4" id="group">
    <input type="checkbox" class="edit-checkbox1" name="groups[]" value="4" id="group">
    <input type="checkbox" class="edit-checkbox" name="groups[]" value="4" id="group">

should be written like this:

    <input type="checkbox" class="edit-checkbox group" name="groups[]" value="4" >
    <input type="checkbox" class="edit-checkbox1 group" name="groups[]" value="4" >
    <input type="checkbox" class="edit-checkbox group" name="groups[]" value="4" >

Then here is a solution to your issue: JSFIDDLE DEMO

$('.group').on('change', function() {
    var totalSeen = $("input.group:checked").length;
    if ($(this).prop("checked")) {
        $('#user').prop('checked', true);
        return;
    } else if (totalSeen == 0) {
     $('#user').prop('checked', false);
     		return;
    } 
});
.module {
  background: #fff;
  width:100%;
  height: 80px;
  display:block;
  margin-bottom: 20px;
}
.checkbox {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="module" id="1">
<form action="">
  <div class="checkbox">
    <input type="checkbox" class="edit-checkbox group" name="groups[]" value="4" >
      <span>Groep 8</span>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="edit-checkbox1 group" name="groups[]" value="4" >
      <span>Groep 7</span>
  </div>
  <div class="checkbox">
     <input type="checkbox" class="edit-checkbox group" name="groups[]" value="4" >
      <span>Groep 6</span>
  </div>
</form>
<br><hr><br>
<form action="">
  <div class="checkbox">
    <input type="checkbox" class="edit-checkbox" name="groups[]" value="4" id="man">
      <span>Manager</span>
  </div>
  <div class="checkbox">
    <input type="checkbox" class="edit-checkbox" name="groups[]" value="4" id="admin">
      <span>Administrator</span>
  </div>
  <div class="checkbox">
     <input type="checkbox" class="edit-checkbox" name="groups[]" value="4" id="user">
      <span>Gebruiker</span>
  </div>
  <div class="checkbox">
     <input type="checkbox" class="edit-checkbox" name="groups[]" value="4" id="userRead">
      <span>Gebruiker (alleen lezen)</span>
  </div>
</form>
</div>

<div class="module" id="2">
x
</div>

Upvotes: 1

P.S.
P.S.

Reputation: 16384

"If one of these checkboxes is checked another checkbox with the id (#user) should be checked as well."

I have changed ids to classes, because it's a bad practice, to use same ids on the page. And here it is (if you need an explanation - just ask):

$('input').on('change', function() {
  var currentClass = $(this).attr('class');
  if ($(this).prop('checked')) {
    $('.' + currentClass).prop('checked', true);
  } else {
    $('.' + currentClass).prop('checked', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkBox1" type="checkbox">
<input class="checkBox1" type="checkbox">
<input class="checkBox1" type="checkbox">
<input class="checkBox1" type="checkbox">
<input class="checkBox1" type="checkbox">
<input class="checkBox2" type="checkbox">
<input class="checkBox2" type="checkbox">
<input class="checkBox2" type="checkbox">
<input class="checkBox2" type="checkbox">
<input class="checkBox2" type="checkbox">

Upvotes: 0

Related Questions