选中/取消选中 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";

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


});

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

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

    });		


}

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

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