jQuery 1.9.1 を使用し、IE8 と Firefox の両方で作業しています。私のページには、動的に作成されるチェックボックスを持つテーブルがあります。
表示されると、いくつかの行の HTML は次のようになります。
<tr><td><label for="RoomNbr2" align="right"> Room No 2<input type="checkbox" align="left" class="checkall" id="RoomNbr2" name="RoomNbr2"></label></td><td><label for="PCNbr203" align="right"> 203<input type="checkbox" align="left" id="PCNbr203" name="PCNbr203" class="RoomNbr2"></label></td><td><label for="PCNbr204" align="right"> 204<input type="checkbox" align="left" id="PCNbr204" name="PCNbr204" class="RoomNbr2"></label></td></tr>
<tr><td><label for="RoomNbr3" align="right"> Room No 3<input type="checkbox" align="left" class="checkall" id="RoomNbr3" name="RoomNbr3"></label></td><td><label for="PCNbr310" align="right"> 310<input type="checkbox" align="left" id="PCNbr310" name="PCNbr310" class="RoomNbr3"></label></td><td><label for="PCNbr320" align="right"> 320<input type="checkbox" align="left" id="PCNbr320" name="PCNbr320" class="RoomNbr3"></label></td><td><label for="PCNbr340" align="right"> 340<input type="checkbox" align="left" id="PCNbr340" name="PCNbr340" class="RoomNbr3"></label></td><td><label for="PCNbr350" align="right"> 350<input type="checkbox" align="left" id="PCNbr350" name="PCNbr350" class="RoomNbr3"></label></td></tr>
ユーザーがルームをクリックすると、そのルームに関連するすべてのチェックボックス (PCNbrXXX) がチェックされます。ユーザーは個々のチェックボックスを選択することも、個々のチェックボックスを選択/選択解除することもできます。
部屋番号をチェックすると、関連するすべてのチェックボックスがチェックされますが、個別に選択を解除すると、部屋番号チェックボックスはチェックされたままになります。すべてのボックスをチェックするために使用するコードは次のとおりです。
$('#mytable').on('click','.checkall', function() {
$('input.' + this.id).prop('checked', this.checked);
});
個々のチェックをキャッチするために使用しているコードは次のとおりです。
$('#mytable').on('click', function() {
$('input.' + this.id).prop('checked', this.checked);
});
IE8とFirefoxでは、個々のチェックボックスがチェックされているかどうかを監視し、Room Nbrチェックボックスの表示ステータスを(1)その行のすべてがチェックされている場合はチェック済みを表示し、(2)不確定に変更する必要があります行の 1 つ以上がクリアされている場合はステータス (および checkall がクリアされています)、(3) 行の個々のチェックボックスがすべてクリアされている場合はクリア済みを表示します。
Room Nbr チェックボックスの名前と ID を与えるクラスを個々のチェックボックスに割り当てていますが、上記の #1 と #3 の状態を管理する方法がわかりません。 status) は IE8 で可能です。少なくとも、ステータスをチェック済み(すべてがチェックされている場合)または行の1つ以上がクリアされている場合はクリアに切り替えたいと思います。
上記を行う方法についての提案をいただければ幸いです。いつでも何がチェックされているかを知るために、次を使用しています。
$("input[name*=PCNbr]:checked").map(function () {return this.name;}).get().join(",")
割り当てたクラスを取得できると思いましたが、まだ適切に機能していません。
ありがとう!