我有几个可折叠的复选框，我正在尝试检查/取消选中该部分中的所有框。
HTML
目前，当我点击主复选框时，它只会打开并关闭可折叠对话框。
<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代码。
$(document).ready(function() {
fixContentHeight();
$('#education').click(function() {
$("INPUT[name='education']").attr('checked', $('#education').is(':checked'));
});
});
任何提示都会有所帮助！
答案 0 :(得分：5)
我不知道这个函数（fixContentHeight();）正在做什么。
这样做，它按预期工作。
//fixContentHeight();
$('#education').click(function() {
$("INPUT[name='education']")
.attr({
checked: $('#education').is(':checked')
});
});
对其他复选框部分采用相同的方式。
参考 LIVE DEMO
请参阅我对所有复选框部分进行了一些修改的相同代码，
//fixContentHeight();
$('h3 input[type=checkbox]').click(function() {
$("INPUT[name='"+this.name+"']")
.attr({
checked: $(this).is(':checked')
});
});
实际上，您的HTML <UL>标记丢失了。
<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>
参考 LIVE DEMO 2
我已经完成了您的代码并对其进行了修改。最后，我遇到了问题。
您需要刷新checkboxradio，以更新所有复选框的选中值。
您需要使用： -
$("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");
});
参考 LIVE DEMO 3
答案 1 :(得分：2)
您需要阻止点击事件冒泡到可折叠的<li>。
$('h3 input[type=checkbox]').click(function(e) {
$("INPUT[name='"+this.name+"']")
.attr({
checked: $(this).is(':checked')
});
e.stopPropagation(); //<--stops the click from bubbling up.
});
文档：http://api.jquery.com/event.stopPropagation/
编辑：阅读有关可折叠的更多内容，理论上只需点击header即可折叠li。检查以确保您的<h3>标记都已正确关闭，并且没有任何杂散元素缺少结束标记。
答案 2 :(得分：1)
$('h3 input[type=checkbox]').click(function() {
var selected = $(this).attr('id');
$("INPUT[name="+selected +"]").attr({checked: $(this).is(':checked')});
});
答案 3 :(得分：0)
我想，你想要这个：
$('h3 :checkbox').change(function() {
//'$(this).parent().next()' is appropriate 'fieldset' element
$(this).parent().next().find(':checkbox').prop('checked', $(this).prop('checked'));
});
这适用于所有3个教育，紧急，设施。
答案 4 :(得分：0)
我理解这个问题很老但是对于那些寻找jQuery 2.x和jQuery Mobile 1.4.3示例的人来说，试试这个：
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
答案 5 :(得分：0)
Stack Overflow上的所有答案对我都不起作用。
以下是我最终找到的解决方案：
您可以尝试$("#radioLabel1").trigger("click");
其中radioLabel1是广播标签的ID。
我的工作代码：
<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>