Question

我正在尝试在一组复选框上实现切换所有功能。也就是说，如果选中了toggle all复选框，则检查表单组中的所有复选框。这是HTML：

<div class="form-group">
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP483" value="300434060981730"><label class="form-check-label" for="CAP483">CAP483</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP485" value="300434060047540"><label class="form-check-label" for="CAP485">CAP485</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP487" value="300434060081220"><label class="form-check-label" for="CAP487">CAP487</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP498" value="300434060705410"><label class="form-check-label" for="CAP498">CAP498</label></div>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="check_rt"><label class="form-check-label" for="rt-toggle-all">Toggle All</label></div>

我正在使用的javascript是：

$("#check_rt").change( function(){
  console.log('checking toggle all');
  var checked = $(this).prop('checked');
  console.log('checked=', checked);
  if (checked == true ) {
   $.each( $("input[class='.form-check-input.tailID_checkbox']"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });
  }
  else {
    $.each($("input[class='.form-check-input.tailID_checkbox']"), function() {
      console.log('iterating');
      $(this).prop('checked', false);
    });
  }
});

我正在捕捉切换所有复选框的切换正常，但是当我尝试通过其他复选框进行迭代时，没有为jquery $ .each函数返回任何内容。我需要一些特殊的方法来找到这门课程吗？

Answer 1

请使用class =＆＃39; form-check-input tailID_checkbox＆＃39;而不是.classname

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import '~@angular/material/_theming.scss';

@include mat-core();

$primary: mat-palette($mat-orange, 500);
$accent: mat-palette($mat-blue-grey, 800);
$warn: mat-palette($mat-pink, 400);

$app-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($app-theme);

代码示例 - https://codepen.io/nagasai/pen/OvRrYo

＆＃13;

   $("input[class='form-check-input tailID_checkbox']")

＆＃13;

$("#check_rt").change( function(){
  console.log('checking toggle all');
  var checked = $(this).prop('checked');
  console.log('checked=', checked);
  if (checked == true ) {
   $.each( $("input[class='form-check-input tailID_checkbox']"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });
  }
  else {
    $.each($("input[class='form-check-input tailID_checkbox']"), function() {
      console.log('iterating');
      $(this).prop('checked', false);
    });
  }
});

＆＃13;

选项2：

使用其他选项获取按类名

的复选框

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP483" value="300434060981730"><label class="form-check-label" for="CAP483">CAP483</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP485" value="300434060047540"><label class="form-check-label" for="CAP485">CAP485</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP487" value="300434060081220"><label class="form-check-label" for="CAP487">CAP487</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP498" value="300434060705410"><label class="form-check-label" for="CAP498">CAP498</label></div>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="check_rt"><label class="form-check-label" for="rt-toggle-all">Toggle All</label></div>

代码示例 - https://codepen.io/nagasai/pen/zWKeOB

从您的代码中观察到的唯一问题是您尝试将两种方法组合在一起获取类名

的复选框

$（＆＃39; .className＆＃39;）和$（＆＃39;输入[class =＆＃39; className＆＃39;]＆＃39;）

Answer 2

只需更改用于从input[class='.form-check-input.tailID_checkbox']到input.form-check-input.tailID_checkbox选择元素的语法。

运行此演示以查看它的工作原理：

＆＃13;

$("#check_rt").change( function(){
  console.log('checking toggle all');
  var checked = $(this).prop('checked');
  console.log('checked=', checked);
  if (checked == true ) {
   $.each( $("input.form-check-input.tailID_checkbox"), function() {
     console.log('iterating');
      $(this).prop('checked', true);
    });
  }
  else {
    $.each($("input.form-check-input.tailID_checkbox"), function() {
      console.log('iterating');
      $(this).prop('checked', false);
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP483" value="300434060981730"><label class="form-check-label" for="CAP483">CAP483</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP485" value="300434060047540"><label class="form-check-label" for="CAP485">CAP485</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP487" value="300434060081220"><label class="form-check-label" for="CAP487">CAP487</label></div>
    <div class="form-check form-check-inline" ><input class="form-check-input tailID_checkbox" type="checkbox" id="CAP498" value="300434060705410"><label class="form-check-label" for="CAP498">CAP498</label></div>
</div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="check_rt"><label class="form-check-label" for="rt-toggle-all">Toggle All</label></div>

＆＃13;

jquery没有返回带有classname的元素

2 个答案: