jquery実装リストのCheckbox選択と逆選択、および選択した値の取得

4894 ワード

日常的な開発では、リストでCheckboxの全選択データを使用して操作することがよくありますので、まとめてみましょう.
全選と反選の2つの方法を採用しました
1つ目:classで選択
htmlコード:
B 157****4101
B 157****4101
B 157****4101

jsコード:
  $('.checkbox_all').on('click', function () {
         if ($(this).prop("checked") == true) {
            //           
            $(".checkbox-data").prop("checked", true);
        } else {
            //           
            $(".checkbox-data").prop("checked", false);
        }
    });

 
第2に,nameで取得し,nameで取得すると,選択可能なcheckboxのnameが一致しなければならないことを保証する必要がある.
htmlコード:
B 157****4101
B 157****4101
B 157****4101

jsコード:
  $('.checkbox_all').on('click', function () {
         if ($(this).prop("checked") == true) {
            //           
            $(":checkbox[name='checkbox-data']").prop("checked", true);
        } else {
            //           
            $(":checkbox[name='checkbox-data']").prop("checked", false);
        }
    });

 
以上は私が整理した2種類のcheckboxの全選択と逆選択のコードです.
以下はリストで選択した値を取得し、私が採用したのは以上の最初のclassで選択と逆選択を行い、nameは単一のデータを格納するIdである.
  $('.table-list').find(':checkbox').each(function () {
            if ($(this).is(":checked")) {
                var id = $(this).attr('name');
                alert(id);
            }
        });

簡単に整理してみると、一番いいものでも一番いいものでもないかもしれませんが、参考にして勉強します.もっと良い書き方があれば伝言討論を歓迎します.