jQuery操作チェックボックス選択(リスト/テーブル)

1. チェックボックスリストの選択

レンダリング:

" -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

$(function () { / / すべて選択 $("#btnCheckAll").bind("click", function () { $("[name = chkItem]:checkbox").attr("checked", true); }); // 何も選択しません $("#btnCheckNone").bind("click", function () { $("[name = chkItem]:checkbox")。 attr("checked", false); // 選択を反転します $("#btnCheckReverse").bind("click", function () { $("[ name = chkItem]:checkbox").each(function () { $(this).attr("checked", !$(this).attr("checked")); }); }); // 何も選択しません $("#btnSubmit").bind("click", function () { var result = new Array(); $(" [name = chkItem]:checkbox").each(function () { if ($(this).is(":checked")) { result.push($(this).attr(" value")); } }); alert(result.join(",")); }); }); 🎜> ビジュアル フォーカス 金融 自動車 テクノロジー 不動産 旅行 =" btnCheckNone" type="button" value="何も選択しません" /> =" btnSubmit" type="button" value="Submit" />

2. チェックボックステーブルは

を選択します。 レンダリング:

コード:

コードをコピー

コードは次のとおりです: テーブル { border-collapse: 折りたたむ; } td { ボーダー: 1px 実線 #ccc; } $(function () { // chkAll全选イベント $("#chkAll").bind("click", function () { $("[name = chkItem] :checkbox").attr("checked", this.checked); }); // chkItem イベント $("[name = chkItem]:checkbox").bind("click" , function () { var $chk = $("[name = chkItem]:checkbox"); $("#chkAll").attr("checked", $chk.length == $chk .filter(":checked").length); }) });

分別名

今日话题 視觉焦点 财经 汽车 科技 房产 旅游

jQuery操作チェックボックス選択(リスト/テーブル)_jquery

関連記事