檢查/取消選中jquery mobile中的所有複選框失敗

Question

我有一個帶有兩個按鈕的jquerymobile頁面。一個選中所有複選框，一個選中所有複選框。 我第一次點擊check all它的工作原理，但在取消選中之後，它不再有效。

這裏是我的代碼：

<div data-role="page" id="selecttest"> 

    <div data-role="header"> 
     <a href="#sc" data-icon="home">SSC</a> 
     <h1>...</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <fieldset class="ui-grid-a"> 
      <div class="ui-block-a"><button onclick="$('#selecttest input[type=checkbox]').attr('checked','checked').checkboxradio('refresh');" data-theme="b">check all</button></div> 
      <div class="ui-block-b"><button onclick="$('#selecttest input[type=checkbox]').removeAttr('checked').checkboxradio('refresh');" data-theme="b">uncheck all</button></div> 
     </fieldset> 
     <fieldset data-role="controlgroup"> 
      <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"> 
      <label for="checkbox-v-2a">One</label> 
      <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"> 
      <label for="checkbox-v-2b">Two</label> 
      <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"> 
      <label for="checkbox-v-2c">Three</label> 
     </fieldset> 
    </div> 
</div><!-- /page --> 

我使用jQuery 1.9.1與jQuerymobile 1.3

我已經在How to select or unselect all checkboxes in JQuery Mobile?採取一看，但它並沒有幫助我。

Answer 1

jQuery 1.9重新設置了對1.6中的.attr所做的更改，並在1.6.1中將其刪除。這意味着.attr和.prop現在已經變回嚴格。如果您需要操作屬性，請使用.prop，否則請使用.attr。你實際上想要使用該屬性是非常罕見的。

對於複選框的選中狀態，你應該使用.prop("checked",true)或.prop("checked",false)

Answer 2

$('h3 :checkbox').change(function(e) { 
 
    e.preventDefault(); 
 

 
var tasiyici = "form1"; 
 

 
\t \t if($(this).prop("checked")== true) 
 
\t \t { 
 
\t \t tumunuSec(tasiyici,true); 
 
\t \t }else{ 
 
\t \t tumunuSec(tasiyici,false); \t 
 
\t \t } 
 

 

 
}); 
 

 
$('#form1 input[type=checkbox]').change(function(e) { 
 
    e.preventDefault(); 
 
\t var truesayisi = $("#form1 input[type=checkbox]:checked").size(); 
 
\t var checksayisi = $("#form1 input[type=checkbox]").size(); 
 
\t \t if(truesayisi == checksayisi) 
 
\t \t { 
 
\t \t \t $('h3 :checkbox').prop("checked",true); 
 
\t \t } \t 
 
\t \t if(truesayisi < checksayisi) 
 
\t \t { 
 
\t \t \t $('h3 :checkbox').prop("checked",false); 
 
\t \t } 
 
}); 
 

 
function tumunuSec(FormAdi, cvalue){ 
 
\t \t var truesayisi = 0; 
 
    $.each($("#"+FormAdi+" input[type=checkbox]"), function(){ 
 
     $(this).prop("checked",cvalue).checkboxradio("refresh"); 
 
\t \t truesayisi++; 
 

 
    }); \t \t 
 

 

 
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
 

 

 
<div class="cont-a" style="min-width:280px !important; width:90% !important; max-width:380px !important;"> 
 
\t <h3 style="padding:8px; margin:0px !important; background:#222; border-radius:4px; text-align:center;"> 
 
\t <input type="checkbox" name="secici" id="secici" style="margin:0px;" class="tipso" title="Select All"><p>TOPLU İŞLEM</p></h3> 
 
\t <form action="kontrol.php" method="post" data-ajax="false" style="padding:0px; margin:0px;"> 
 
\t \t <fieldset class="ui-field-contain" data-role="controlgroup" id="form1" data-filter="true" STYLE="width:100%; border:0px solid #ffcc00"> 
 
\t \t \t <input type="checkbox" name="menuler[]" value="1" id="1"> 
 
\t \t \t <label for="1">Menü 1</label> 
 
\t \t \t <input type="checkbox" name="menuler[]" value="2" id="2"> 
 
\t \t \t <label for="2">Menü 2</label> 
 
\t \t \t <input type="checkbox" name="menuler[]" value="3" id="3"> 
 
\t \t \t <label for="3">Menü 3</label> 
 

 
\t \t </fieldset> 
 
\t \t \t \t <div class="no-results" >Kayıt bulunamadı.</div> \t 
 
\t \t <input type="submit" value="yolla" /> 
 
\t </form> 
 
</div>