jquery実装リストのCheckbox選択と逆選択、および選択した値の取得
4894 ワード
日常的な開発では、リストでCheckboxの全選択データを使用して操作することがよくありますので、まとめてみましょう.
全選と反選の2つの方法を採用しました
1つ目:classで選択
htmlコード:
jsコード:
第2に,nameで取得し,nameで取得すると,選択可能なcheckboxのnameが一致しなければならないことを保証する必要がある.
htmlコード:
jsコード:
以上は私が整理した2種類のcheckboxの全選択と逆選択のコードです.
以下はリストで選択した値を取得し、私が採用したのは以上の最初のclassで選択と逆選択を行い、nameは単一のデータを格納するIdである.
簡単に整理してみると、一番いいものでも一番いいものでもないかもしれませんが、参考にして勉強します.もっと良い書き方があれば伝言討論を歓迎します.
全選と反選の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);
}
});
簡単に整理してみると、一番いいものでも一番いいものでもないかもしれませんが、参考にして勉強します.もっと良い書き方があれば伝言討論を歓迎します.