Question

我有多个带有相同id（#group）的复选框的问题，如果选中了其中一个复选框，则应检查另一个带有id（#user）的复选框。问题是，使用$ this它就像魅力一样，但是你又有了没有#group id的复选框。我做了这个小提琴来证明这个问题。

$('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;
  }
});

这是简单的Jquery

{{1}}

Answer 1

首先，您不能将同一个id提供给多个HTML ELEMENTS，而应该使用class，所以：

    <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">

应该写成这样：

    <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" >

然后，这是您的问题的解决方案：JSFIDDLE DEMO

＆＃13;

$('.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;
    } 
});

＆＃13;

.module {
  background: #fff;
  width:100%;
  height: 80px;
  display:block;
  margin-bottom: 20px;
}
.checkbox {
  float: left;
}

＆＃13;

<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>

＆＃13;

Answer 2

“如果选中其中一个复选框，则还应检查另一个带有id（#user）的复选框。”

我已将id更改为class es，因为在页面上使用相同的id是不好的做法。这就是（如果你需要解释 - 请问）：

$('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">

Answer 3

我创建了四个具有相同组的复选框，如下所示，

<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>

及以下是我的js代码，当您选中/取消选中任何复选框时，会将所有复选框标记为已选中/取消选中

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

希望这会有所帮助!!

Jquery具有相同id问题的多个复选框

3 个答案: