jquery checkbox全選択操作が正常でない問題解決
3311 ワード
背景:リスト内のすべてのデータに対するcheckbox操作.ボタン形式で、すべてのデータのcheckboxをすべて選択してコミットします.
質問:1回目の全選択は問題ありませんが、手動でいくつかのオプションを削除した後、ボタンをクリックすると、全選択の操作が実現できません.
ここでは、ビジネスの実現ロジックの良し悪しについては議論しません.ただ、ボタンを全部提出して2回目をクリックすると、相手が選択したcheckboxを動かすことができなくなったということです.そして上のコードのループで得られた選択結果は、「checked」つまりtrueです.
これはいったいどういうことですか.なぜブラウザはプログラムにこの結果を返すのですか?ブラウザ表示では「checked」状態ではないのに、なぜプログラムが「checked」を得たのでしょうか.
最後に、jquery APIで答えを見つけました.
これまでcheckboxのステータス表示を無視していましたが、私のプロジェクトでは「undefined」と「checked」の2つのステータスが表示されていました.
解決策:
JQueryの.prop()メソッド、私の修正後のコードは以下の通りです.attr変換prop
上の説明もjquery APIのpropメソッドに書かれています.
<ul class="main-menu" id="task">
<li class="nav-header hidden-tablet"><input type="checkbox" id="checkall" name="allCheckbox" onclick="checkAll(this);"><span>checkAll</span></li>
<li><input type="checkbox" id="checkbox-1" name="checkbox"><span>checkbox1</span></li>
<li><input type="checkbox" id="checkbox-2" name="checkbox"><span>checkbox2</span></li>
<li><input type="checkbox" id="checkbox-3" name="checkbox"><span>checkbox3</span></li>
<li><input type="checkbox" id="checkbox-4" name="checkbox"><span>checkbox4</span></li>
<li><input type="checkbox" id="checkbox-5" name="checkbox"><span>checkbox5</span></li>
</ul>
質問:1回目の全選択は問題ありませんが、手動でいくつかのオプションを削除した後、ボタンをクリックすると、全選択の操作が実現できません.
//
function submitAllByButton() {
var p = parent.window.document; //
var checkall = p.getElementById("checkall"); // id, id checkbox
if(!checkall.checked){ // checkbox ,
$(checkall).attr("checked", true);
}
var checkbox = p.getElementsByName("checkbox"); // checkbox
for(var i = 0 ; i < checkbox.length; i ++){ // , jquery each
var temp = checkbox[i];
if(!temp.checked) { // ,
$(temp).attr("checked", true);
}
}
submit(); // 。
}
ここでは、ビジネスの実現ロジックの良し悪しについては議論しません.ただ、ボタンを全部提出して2回目をクリックすると、相手が選択したcheckboxを動かすことができなくなったということです.そして上のコードのループで得られた選択結果は、「checked」つまりtrueです.
これはいったいどういうことですか.なぜブラウザはプログラムにこの結果を返すのですか?ブラウザ表示では「checked」状態ではないのに、なぜプログラムが「checked」を得たのでしょうか.
最後に、jquery APIで答えを見つけました.
DOM window , , 。jQuery undefined ,
これまでcheckboxのステータス表示を無視していましたが、私のプロジェクトでは「undefined」と「checked」の2つのステータスが表示されていました.
解決策:
JQueryの.prop()メソッド、私の修正後のコードは以下の通りです.attr変換prop
//
function submitByAllButton() {
var p = parent.window.document;
var checkall = p.getElementById("checkall");
if(!checkall.checked){
$(checkall).prop("checked", true);
}
var checkbox = p.getElementsByName("checkbox");
for(var i = 0 ; i < checkbox.length; i ++){
var temp = checkbox[i];
if(!temp.checked) {
$(temp).prop("checked", true);
}
}
submit();
}
上の説明もjquery APIのpropメソッドに書かれています.