BinaryDevelop
  1. ホーム
  2. javascript

どのようにjQueryですべてのチェックボックスを選択するには？

2023-11-11 23:48:01

質問

私はjQueryのセレクタに関するヘルプが必要です。私は以下のようなマークアップを持っていると言う。 

<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

を除くすべてのチェックボックスを取得する方法 #select_all を除くすべてのチェックボックスを取得する方法は？

どのように解決するのですか？

あなたのケースで動作するはずの、より完全な例です。 

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

を指定すると #select_all のチェックボックスがクリックされると、そのチェックボックスの状態がチェックされ、現在のフォームのすべてのチェックボックスが同じ状態に設定されます。

を除外する必要がないことに注意してください。 #select_all チェックボックスは他のチェックボックスと同じステータスになるので、選択から除外する必要はありません。もし、何らかの理由で #select_all を除外する必要がある場合は、これを使用できます。 

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します