Как я должен спроектировать область, к которой следует применить JS?

Question

Я ищу способ применения функции 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 ...

Answer 1

Вы можете сделать это следующим образом:

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