检查/取消选中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>