jquery checkbox全選択操作が正常でない問題解決

3311 ワード

背景:リスト内のすべてのデータに対するcheckbox操作.ボタン形式で、すべてのデータのcheckboxをすべて選択してコミットします.
       
<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メソッドに書かれています.