jquery 모바일의 모든 체크 박스를 선택/선택 취소합니다.

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>