jsでCheckBoxListを操作して全選択・逆選択を実現（顧客サービス側で完結）_javascriptスキル

CheckBoxList コントロールの場合、サーバー側で大量のデータをバインドする必要がある一方で、全選択や逆選択などの機能を実装する必要があることがよくあります。この部分の作業はサーバー側でも実行できますが、このような単純な作業はクライアント側で実行する必要があるようです。

特定の方法:
ページに CheckBoxList コントロールを配置し、生成される HTML コードを分析するためのいくつかの項目を追加します。これにより、制御時に js を使用して動的に
を行うことができます。

コードをコピーします コードは次のとおりです:

RepeatColumns="3">
1232< ;/asp:ListItem>
/asp:ListItem>
5643リストアイテム>789
/asp:ListItem>

8564
8564
5452 /asp:ListItem> ;



ブラウザで表示して HTML を分析します。 以下は、DropDownList コントロールによって生成された HTML コードです。

コードをコピー コードは次のとおりです:

1232


....


ここから抜粋コードの一部である青い部分が私たちが注目する部分です。 HTML では、CheckBoxList は
個の入力 (タイ​​プはチェックボックス) を生成し、その ID は "CheckBoxList1_i" (i は数字) です。このように、

いくつかの項目を知るだけで、js で簡単に制御できます。
これらの入力は、ID CheckBoxList1 を持つテーブルに含まれているため、渡すことができます。

コードをコピーします コード document.getElementById("CheckBoxList1").getElementsByTagName("input").length

このメソッドは、CheckBoxList にある項目の数を取得します。残りの作業は実際には非常に簡単で、js を使用して各
チェックボックスのステータスを変更するだけです。まず、以下に示すように、完全選択、反転選択、およびクリア コントロールを実現する 3 つのボタンを追加します。

コードをコピー コードは次のとおりです。 :

すべてを選択して追加逆選択 そして、クリア機能は次のとおりです:

コードをコピー コードは次のとおりです: functioncheckAll(){

//alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length);

for(vari=0;i{
document.getElementById("CheckBoxList1_" i).checked=true;
}
}
functiondeleteAll(){
for(vari=0;i< ;document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i )
{
document.getElementById("CheckBoxList1_" i).checked=false;
}
}
functionReverseAll(){
for(vari=0;i{
varobjCheck=document.getElementById ("CheckBoxList1_" i);
if(objCheck.checked)
else
objCheck.checked=true;
}


OK, now through the IE test, binding work can be done in the background, and auxiliary functions such as select all can be freely used!