jqueryは、チェックボックスの全選択動作の実例コードを実現します。
jqueryは、チェックボックスの全選択動作の実例コードを実現します。
最近は必要なものを作って、リストチェックボックスの全選択/キャンセルの全選択操作を実現します。これはよく分かりませんでしたので、ネットでいくつかの資料を調べました。実現方法はいろいろありますが、直接に使えるものは見つけられませんでした。自分で考えて、機能を実現して、次のように整理します。
細部を実現するために、改善できるところがあれば、教えてください。
まずhtml部分のコードです。ここに表があります。表の中にいくつかのオプションがあります。
同時に、各オプションチェックボックスに判定を追加します。すべてのオプションチェックボックスが選択されている場合、全選択ボックスが自動的に選択されます。選択されていない場合は、全選択ボックスが選択解除されます。ここではカウントによって(オプションの数と選択されたオプションの数)を比較し、each法によって巡回します。
最後に、表示時に一度実行します。初期状態がすべてのオプションが選択されている状態であれば、全選択枠も選択されている状態であることを確認します。
参考:jqueryでcheckboxの使い方を簡単に例示しています。
最近は必要なものを作って、リストチェックボックスの全選択/キャンセルの全選択操作を実現します。これはよく分かりませんでしたので、ネットでいくつかの資料を調べました。実現方法はいろいろありますが、直接に使えるものは見つけられませんでした。自分で考えて、機能を実現して、次のように整理します。
細部を実現するために、改善できるところがあれば、教えてください。
まずhtml部分のコードです。ここに表があります。表の中にいくつかのオプションがあります。
<div id="list">
<table>
<tr><td> 1<input type="checkbox" name="group" value="1"/></tr>
<tr><td> 2<input type="checkbox" name="group" value="2"/></tr>
<tr><td> 3<input type="checkbox" name="group" value="3"/></tr>
</table>
</div>
<input type="checkbox" id="all"/>
次はjqueryです。
<script>
$(document).ready(function () {
//
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").attr("checked", true);
} else {
$("#list :checkbox").attr("checked", false);
}
});
//
$("#list :checkbox").click(function () {
allchk();
});
function allchk() {
var chknum = $("#list :checkbox").size();//
var chk = 0;
$("#list :checkbox").each(function () {
if ($(this).attr("checked")) {
chk++;
}
});
if (chknum == chk) {//
$("#all").attr("checked", true);
} else {//
$("#all").attr("checked", false);
}
}
//
allchk();
});
</script>
全選択枠をクリックした場合、選択状態を判断し、選択した場合は、すべてのオプションのチェックボックスに選択属性を設定します。選択をキャンセルすると、すべてのオプションのチェックボックスの選択属性が解除されます。同時に、各オプションチェックボックスに判定を追加します。すべてのオプションチェックボックスが選択されている場合、全選択ボックスが自動的に選択されます。選択されていない場合は、全選択ボックスが選択解除されます。ここではカウントによって(オプションの数と選択されたオプションの数)を比較し、each法によって巡回します。
最後に、表示時に一度実行します。初期状態がすべてのオプションが選択されている状態であれば、全選択枠も選択されている状態であることを確認します。
参考:jqueryでcheckboxの使い方を簡単に例示しています。