Question

我有目前的情况：

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button id="uncheckAllItem">
       <button id="checkAllItem">
    </div>
</div>

<div id="3">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button id="uncheckAllItem">
       <button id="checkAllItem">
    </div>
</div>

每个带有类行的div有2个按钮全选并删除全部。当我单击删除id为2的div的所有按钮时，必须取消选中此div中的所有复选框。 ID为3的div的复选框也是如此。这是我的代码：

$('#uncheckAllItem').click(function() {
   $('#' + <?php echo $model->id ?> + ' input[name^=itemCheckBox]').attr('checked', false);
   return false;
});

问题是此代码取消选中/检查div id 2和div id 3中的所有复选框。它有什么问题？

Answer 1

首先，按钮ID必须是唯一的，您可以编写类

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">
    </div>
</div>

<div id="3">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">
    </div>
</div>

你可以写简单的

$('.uncheckAllItem').click(function() {
    $(this).siblings(':checkbox').attr('checked',false);
    return false;
});

Answer 2

将按钮的ID更改为类。

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">
    </div>

</div>

<div id="3">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button class="uncheckAllItem">
       <button class="checkAllItem">

    </div>

然后在你的脚本中，

$('.uncheckAllItem').click(function() {
   $(this).siblings(':checkbox').attr('checked',false);
return false;    });

这会将事件绑定到名为uncheckAllItems的类，并找到要删除的div并取消选中它。

Answer 3

首先，与建议的其他答案一样，将ID更改为类，因为ID应该是唯一的。其次，在设置复选框状态而不是attr()时使用prop()。

还有一些其他内容，例如应关闭<button>标记并将属性type设置为button。或者，您可以使用<input type="button">，我已将其包含在小提琴中，以表明它们的工作方式相同。

<div id="2">
    <div class="row">
       <input type="checkbox" name="itemCheckbox_1">
       <input type="checkbox" name="itemCheckbox_1">
       <button type="button" class="uncheckAllItem">Uncheck</button>
       <button type="button" class="checkAllItem">Check</button>
    </div>
</div>

$('.uncheckAllItem').click(function() {
    $(this).siblings(':checkbox').prop('checked',false);
});

http://jsfiddle.net/hLen8xqd/

Answer 4

你有一些错误。元素必须关闭。另外，由于提及ID必须是唯一的，因此请使用类。我建议在按钮元素中使用属性check uncheck作为解决方案，并选中/取消选中复选框，例如：

＆＃13;

$(".row button").on("click", function() {
  $(this).parent().find(":checkbox").prop("checked", $(this).attr("value") == "check");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="2">
  <div class="row">
    <input type="checkbox" name="itemCheckbox_1" />
    <input type="checkbox" name="itemCheckbox_1" />
    <button class="uncheckAllItem" value="uncheck">uncheck all</button>
    <button class="checkAllItem" value="check">check all</button>
  </div>
</div>

<div id="3">
  <div class="row">
    <input type="checkbox" name="itemCheckbox_1" />
    <input type="checkbox" name="itemCheckbox_1" />
    <button class="uncheckAllItem" value="uncheck">uncheck all</button>
    <button class="checkAllItem" value="check">check all</button>
  </div>
</div>

＆＃13;

div中的Jquery复选框

4 个答案: