时间戳

首页 > 解决方案 > 我应该如何设计一个应该应用 JS 的区域？

javascript - 我应该如何设计一个应该应用 JS 的区域？

问题描述

我正在寻找一种将 JQuery 函数应用于每个部门的方法。

下面的代码应用了所有名为 chk[] 的复选框。但我想让它检查每个 div。是否可以将参数放入 Jquery 函数中？我想让它可以选择 div(Part1-4)。

//Is it possible to put parameter? 
$(function(arg) {
    $('#all').on('click', function() {
//arg should be part_1 or part_2 part_3...
//$("arg input[name='chk[]']").prop('checked', this.checked);
      $("input[name='chk[]']").prop('checked', this.checked);
    });
    $("input[name='chk[]']").on('click', function() {
      if ($('#part_ :checked').length == $('#part_ :input').length) {
        $('#all').prop('checked', true);
      } else {
        $('#all').prop('checked', false);
      }
    });
  });




<form method="POST" action="{{ route('debug.store') }}">
<label for="all"><input type="checkbox" name="allChecked" id="all">ALL</label>
<div id="part_1">
  <label><input type="checkbox" name="chk[]" value="A">1A</label>
  <label><input type="checkbox" name="chk[]" value="B">1B</label>
  <label><input type="checkbox" name="chk[]" value="C">1C</label>
  <label><input type="checkbox" name="chk[]" value="D">1D</label>
</div>
</form>
<form method="POST" action="{{ route('debug.store') }}">
<label for="all"><input type="checkbox" name="allChecked" id="all">ALL</label>
<div id="part_2">
  <label><input type="checkbox" name="chk[]" value="A">2A</label>
  <label><input type="checkbox" name="chk[]" value="B">2B</label>
  <label><input type="checkbox" name="chk[]" value="C">2C</label>
  <label><input type="checkbox" name="chk[]" value="D">2D</label>
</div>
</form>
<form method="POST" action="{{ route('debug.store') }}">
<label for="all"><input type="checkbox" name="allChecked" id="all">ALL</label>
<div id="part_3">
  <label><input type="checkbox" name="chk[]" value="A">3A</label>
  <label><input type="checkbox" name="chk[]" value="B">3B</label>
  <label><input type="checkbox" name="chk[]" value="C">3C</label>
  <label><input type="checkbox" name="chk[]" value="D">3D</label>
</div>
</form>


//4 , 5 , 6 ...

标签： javascripthtmljquery

解决方案

你可以这样做：

$(document).ready(function() {
  $("input[type='checkbox']").on("change", function() {
    let selected = $(this).val();
    if (selected == "all") {
      $("input[name='chk[]']").prop('checked', true);
    } else if ($(this).val().startsWith("part")) {
      $("#" + selected + " input[name='chk[]']").prop('checked', true);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="all"><input type="checkbox" name="allChecked" id="all" value="all">ALL</label>
<label for="part-1"><input type="checkbox" name="part-1-Checked" value="part_1">Part 1</label>
<label for="part-2"><input type="checkbox" name="part-2-Checked" value="part_2">Part 2</label>
<label for="part-3"><input type="checkbox" name="part-3-Checked" value="part_3">Part3</label>

<form method="POST" action="{{ route('debug.store') }}">
  <div id="part_1">
    <label><input type="checkbox" name="chk[]" value="A">1A</label>
    <label><input type="checkbox" name="chk[]" value="B">1B</label>
    <label><input type="checkbox" name="chk[]" value="C">1C</label>
    <label><input type="checkbox" name="chk[]" value="D">1D</label>
  </div>
</form>
<form method="POST" action="{{ route('debug.store') }}">
  <div id="part_2">
    <label><input type="checkbox" name="chk[]" value="A">2A</label>
    <label><input type="checkbox" name="chk[]" value="B">2B</label>
    <label><input type="checkbox" name="chk[]" value="C">2C</label>
    <label><input type="checkbox" name="chk[]" value="D">2D</label>
  </div>
</form>
<form method="POST" action="{{ route('debug.store') }}">
  <div id="part_3">
    <label><input type="checkbox" name="chk[]" value="A">3A</label>
    <label><input type="checkbox" name="chk[]" value="B">3B</label>
    <label><input type="checkbox" name="chk[]" value="C">3C</label>
    <label><input type="checkbox" name="chk[]" value="D">3D</label>
  </div>
</form>

推荐阅读