Question

<div class="ui-checkbox">
    <input type="checkbox"  value="" checked="" id="checkAll" data-cacheval="true">
</div>

$('#checkAll').click(function () {
    $('.ui-checkbox input:checkbox').prop('checked', this.checked);
});

我的代码工作正常，但是如果我在html中添加标签，则代码下面的代码不起作用

<div class="ui-checkbox"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on">&nbsp;</label><input type="checkbox" class="checkSingle" value="" checked="" id="checkItem-3913238"></div>

如何在js中访问标签？

下面是我的完整代码

<table class="table display table-striped bulk-assign-tbl" cellspacing="0" width="100%">
  <tr>
     <th><label><input type="checkbox" value="" id="checkAll" checked>&nbsp;</label></th>
     <th>Item Name</th>
   </tr>
  <?php foreach ($item_data as $key => $val): ?><tr>

   <td><label id="checkAllLabel"><input type="checkbox" class="checkSingle" value="" checked id ="checkItem-<?= $val['chkoiid'] ?>">&nbsp;</label></td>
      <td> <?php echo $val['name']; ?> </td>
    </tr>                            
   <?php endforeach; ?>
  </table>

 $('#checkAll,#checkAllLabel').click(function () {
         $('.ui-checkbox input:checkbox').prop('checked', this.checked);
 });
  $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;
  $(".checkSingle").each(function () {
            if (!this.checked)
                isAllChecked = 1;
     });

 if (isAllChecked == 0) {
      $("#checkAll").prop("checked", true);
       }
     } else {
        $("#checkAll").prop("checked", false);
     }
  });

Answer 1

这是工作代码。 https://jsfiddle.net/h781y2pv/

您错过了标签的for属性，现在就添加了。

 <label for="checkAll" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on">Click me</label>

如果要访问JS中的标签。你可以像任何其他元素一样访问它。 $('ui-checkbox label')或给它一个类或ID，$('.ui-checkbox-label')假设添加的类名是“ui-checkbox-label”

bootstrap复选框不能正常工作

1 个答案: