CODEWITHSUNDEEP
jqueryjquery-mobile
idmean
idmean

Reputation: 14875

Check/Uncheck all checkboxes in jquery mobile fails

I have a jquerymobile page with two buttons. One two check all checkboxes and one to uncheck all checkboxes. First time I click on check all it works, but after unchecking it doesn't works anymore.

Here is my code:

<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 -->

I'm using jQuery 1.9.1 with jQuerymobile 1.3

I've already taken a look at How to select or unselect all checkboxes in JQuery Mobile? but it hasn't helped me.

Upvotes: 1

Views: 5569

Answers (2)

user6855841
user6855841

Reputation: 1

$('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>

Upvotes: 0

Kevin B
Kevin B

Reputation: 95022

jQuery 1.9 re-instated the changes that were done to .attr in 1.6 and removed in 1.6.1. This means that the .attr vs .prop is now back to being strict. If you need to manipulate properties, use .prop, else, use .attr. It's very rare that you actually would want to work with the attribute.

For checked state of a checkbox, you should be using .prop("checked",true) or .prop("checked",false)

Upvotes: 10

Related Questions