问题
I have several collapsible check-boxes, and am trying to check/uncheck all the boxes within that section.
HTML
Currently when I click on the main checkbox, it simply opens and closes the collapsible dialog.
<li data-role="collapsible" id="educationlayers">
<h3>
<input type="checkbox" name="education" id="education" class="layers"/>
<label for="education">Education</label>
</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" data-mini="true" name="education" id="daycare" class="layers"/>
<label for="daycare">Day Care</label>
<input type="checkbox" data-mini="true" name="education" id="elementary" class="layers"/>
<label for="elementary">Elementary</label>
<input type="checkbox" data-mini="true" name="education" id="intermediate" class="layers"/>
<label for="highschool">High School</label>
<input type="checkbox" data-mini="true" name="education" id="postsecondary" class="layers"/>
<label for="postsecondary">Post Secondary School</label>
</fieldset>
</li>
<li data-role="collapsible" id="emergencylayers">
<h3>
<input type="checkbox" name="emergency" id="emergency" class="layers"/>
<label for="emergency">Emergency</label>
</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" data-mini="true" name="emergency" id="ambulance" class="layers"/>
<label for="ambulance">Ambulance Station</label>
<input type="checkbox" data-mini="true" name="emergency" id="fire" class="layers"/>
<label for="fire">Fire Station</label>
<input type="checkbox" data-mini="true" name="emergency" id="hospital" class="layers"/>
<label for="hospital">Hospital</label>
<input type="checkbox" data-mini="true" name="emergency" id="police" class="layers"/>
<label for="police">Police</label>
</fieldset>
</li>
<li data-role="collapsible" id="facilitieslayers">
<h3>
<input type="checkbox" name="facilities" id="facilities" class="layers"/>
<label for="facilities">Facilities</label>
</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" data-mini="true" name="facilities" id="commerce" class="layers"/>
<label for="commerce">Chamber of Commerce</label>
<input type="checkbox" data-mini="true" name="facilities" id="cityfacility" class="layers"/>
<label for="cityfacility">City Facility</label>
<input type="checkbox" data-mini="true" name="facilities" id="cityhall" class="layers"/>
<label for="cityhall">City Hall</label>
<input type="checkbox" data-mini="true" name="facilities" id="govfacility" class="layers"/>
<label for="govfacility">Government Facility</label>
</fieldset>
</li>
JQuery
JQuery code that doesn't seem to work.
$(document).ready(function() {
fixContentHeight();
$('#education').click(function() {
$("INPUT[name='education']").attr('checked', $('#education').is(':checked'));
});
});
Any tips would be helpful!
回答1:
I don't about what this function (fixContentHeight();
) is doing.
Do this way, it works as expected.
//fixContentHeight();
$('#education').click(function() {
$("INPUT[name='education']")
.attr({
checked: $('#education').is(':checked')
});
});
Follow the same fashion for other checkbox sections.
Refer LIVE DEMO
UPDATED:
Refer this same piece of code which I have done some modifications to works for all checkbox sections,
//fixContentHeight();
$('h3 input[type=checkbox]').click(function() {
$("INPUT[name='"+this.name+"']")
.attr({
checked: $(this).is(':checked')
});
});
HTML:
Actually on your HTML <UL>
tag is missing.
<ul>
<li data-role="collapsible" id="educationlayers">
<h3>
<input type="checkbox" name="education" id="education" class="layers"/>
<label for="education">Education</label>
</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" data-mini="true" name="education" id="daycare" class="layers"/>
<label for="daycare">Day Care</label>
<input type="checkbox" data-mini="true" name="education" id="elementary" class="layers"/>
<label for="elementary">Elementary</label>
<input type="checkbox" data-mini="true" name="education" id="intermediate" class="layers"/>
<label for="highschool">High School</label>
<input type="checkbox" data-mini="true" name="education" id="postsecondary" class="layers"/>
<label for="postsecondary">Post Secondary School</label>
</fieldset>
</li>
<li data-role="collapsible" id="emergencylayers">
<h3>
<input type="checkbox" name="emergency" id="emergency" class="layers"/>
<label for="emergency">Emergency</label>
</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" data-mini="true" name="emergency" id="ambulance" class="layers"/>
<label for="ambulance">Ambulance Station</label>
<input type="checkbox" data-mini="true" name="emergency" id="fire" class="layers"/>
<label for="fire">Fire Station</label>
<input type="checkbox" data-mini="true" name="emergency" id="hospital" class="layers"/>
<label for="hospital">Hospital</label>
<input type="checkbox" data-mini="true" name="emergency" id="police" class="layers"/>
<label for="police">Police</label>
</fieldset>
</li>
<li data-role="collapsible" id="facilitieslayers">
<h3>
<input type="checkbox" name="facilities" id="facilities" class="layers"/>
<label for="facilities">Facilities</label>
</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" data-mini="true" name="facilities" id="commerce" class="layers"/>
<label for="commerce">Chamber of Commerce</label>
<input type="checkbox" data-mini="true" name="facilities" id="cityfacility" class="layers"/>
<label for="cityfacility">City Facility</label>
<input type="checkbox" data-mini="true" name="facilities" id="cityhall" class="layers"/>
<label for="cityhall">City Hall</label>
<input type="checkbox" data-mini="true" name="facilities" id="govfacility" class="layers"/>
<label for="govfacility">Government Facility</label>
</fieldset>
</li>
</ul>
Refer LIVE DEMO 2
UPDATED 2:
I have gone through your code and modified it. Finally I got your issue with the checkboxes.
You need to refresh the checkboxradio
, to get updated with checked value of all checkboxes.
You need to use:-
$("input[name='"+this.name+"']").checkboxradio("refresh");
JS:
$('h3 input[type=checkbox]').click(function() {
$("input[name='"+this.name+"']")
.attr({
checked: $(this).is(':checked')
});
$("input[name='"+this.name+"']").checkboxradio("refresh");
});
Refer LIVE DEMO 3
回答2:
You need to stop the click event from bubbling up to your <li>
which is collapsible.
$('h3 input[type=checkbox]').click(function(e) {
$("INPUT[name='"+this.name+"']")
.attr({
checked: $(this).is(':checked')
});
e.stopPropagation(); //<--stops the click from bubbling up.
});
documentation: http://api.jquery.com/event.stopPropagation/
edit: reading more about the collapsible, in theory only click the header
should be collapsing the li
. check to make sure your <h3>
tags are all closed properly and there isn't any stray elements missing closing tags.
回答3:
$('h3 input[type=checkbox]').click(function() {
var selected = $(this).attr('id');
$("INPUT[name="+selected +"]").attr({checked: $(this).is(':checked')});
});
http://jsfiddle.net/mynameisdonald/p584k/6/
回答4:
I think,you want this:
$('h3 :checkbox').change(function() {
//'$(this).parent().next()' is appropriate 'fieldset' element
$(this).parent().next().find(':checkbox').prop('checked', $(this).prop('checked'));
});
This should work for all 3 ` education, emergency, facilities .
DEMO
回答5:
I understand this question is old but for those looking for a jQuery 2.x and jQuery Mobile 1.4.3 example try this:
HTML :
<div data-role="page" id="chk">
<div data-role="header"> <a href="#sc" data-icon="home">CSA</a>
<h1>katalin_2003</h1>
</div>
<!-- /header -->
<div data-role="content">
<fieldset class="ui-grid-c">
<div class="ui-block-a">
<input type="button" id="button1" data-theme="b" value="check all" />
</div>
<div class="ui-block-b">
<input type="button" id="button2" data-theme="b" value="uncheck all" />
</div>
<div class="ui-block-c">
<input type="button" id="button3" data-theme="b" value="check grp1" />
</div>
<div class="ui-block-d">
<input type="button" id="button4" data-theme="b" value="check grp2" />
</div>
</fieldset>
<div data-role="collapsible" data-collapsed="true" data-content-theme="a">
<h4>grp1</h4>
<fieldset data-role="controlgroup">
<input type="checkbox" grp="1" name="checkboxArr1[]" id="checkbox-v-1a" data-theme="b" />
<label for="checkbox-v-1a">One</label>
<input type="checkbox" grp="1" name="checkboxArr1[]" id="checkbox-v-1b" data-theme="b" />
<label for="checkbox-v-1b">Two</label>
<input type="checkbox" grp="1" name="checkboxArr1[]" id="checkbox-v-1c" data-theme="b" />
<label for="checkbox-v-1c">Three</label>
</fieldset>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">
<h4>grp2</h4>
<fieldset data-role="controlgroup">
<input type="checkbox" grp="2" name="checkboxArr2[]" id="checkbox-v-2a" data-theme="a" />
<label for="checkbox-v-2a">One</label>
<input type="checkbox" grp="2" name="checkboxArr2[]" id="checkbox-v-2b" data-theme="a" />
<label for="checkbox-v-2b">Two</label>
<input type="checkbox" grp="2" name="checkboxArr2[]" id="checkbox-v-2c" data-theme="a" />
<label for="checkbox-v-2c">Three</label>
</fieldset>
</div>
</div>
</div>
JS
$(document).on("pageinit", function(e) {
$('#button1').on( "click", function() {
$('#chk input[type=checkbox][grp=1], #chk input[type=checkbox][grp=2]').prop('checked', true).checkboxradio('refresh');
console.log('ALL checked');
});
$('#button2').on( "click", function() {
$('#chk input[type=checkbox][grp=1], #chk input[type=checkbox][grp=2]').prop('checked', false).checkboxradio('refresh');
console.log('ALL UNchecked');
});
$('#button3').on( "click", function() {
$('#chk input[type=checkbox][grp=1]').prop('checked', true).checkboxradio('refresh');
$('#chk input[type=checkbox][grp=2]').prop('checked', false).checkboxradio('refresh');
console.log('grp1 checked');
});
$('#button4').on( "click", function() {
$('#chk input[type=checkbox][grp=2]').prop('checked', true).checkboxradio('refresh');
$('#chk input[type=checkbox][grp=1]').prop('checked', false).checkboxradio('refresh');
console.log('grp2 checked');
});
});
JSFiddle DEMO
回答6:
All the answers on Stack Overflow don't work for me.
The following is the solution I finally found:
You can try $("#radioLabel1").trigger("click");
where radioLabel1
is the id of the radio's label.
My working code:
<script type="text/javascript">
$(document).on('pagecreate', function(evt) {
$('#checkall_home').click(function(evt) { //checkall_home is the id of the checkall button
if(evt.handled !== true) // This will prevent event triggering more then once
{
//alert('Clicked');
if ($("#checkall_home").html()=="Check All"){
//alert("Checking All");
$("#checkall_home").html("Uncheck All");
$("input.cbxGroupHome").prop("checked", false); //first deselect all of the checkboxes with class name "cbxGroupHome", then simulate clicking on all the labels associated with the checkboxes (i.e. has a for="#id" attribute), which are denoted by the class name "lb_cb_home"
$(".lb_cb_home").trigger("click");
}else{
// alert("unchecking all");
$("#checkall_home").html("Check All");
$("input.cbxGroupHome").prop("checked", true);//.checkboxradio("refresh");
$(".lb_cb_home").trigger("click");
}
evt.handled = true;
}
});
});
</script>
<form method="get" action="">
<fieldset data-role="controlgroup"><!--Because checkboxes use the label element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a fieldset element that has a legend which acts as the title for the question.
Add the data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.-->
<!-- <legend><h4>Ingredients</h4>`</legend>-->
<input id="cb2" type="checkbox" class="cbxGroupHome"/>
<label class="lb_cb_home" for="cb2">1 cup vegetable oil</label>
<input id="cb3" type="checkbox" class="cbxGroupHome"/>
<label class="lb_cb_home" for="cb3">13 pounds fresh green beans, trimmed</label>
<input id="cb4" type="checkbox" class="cbxGroupHome"/>
<label class="lb_cb_home" for="cb4">5 tablespoons minced garlic</label>
<input id="cb5" type="checkbox" class="cbxGroupHome">
<label class="lb_cb_home" for="cb5">5 tablespoons minced fresh ginger root</label>
</fieldset>
</form>
来源:https://stackoverflow.com/questions/11331812/how-to-select-or-unselect-all-checkboxes-in-jquery-mobile