更新时间:2023-11-20 22:13:52
我不关心这个函数( fixContentHeight();
)在做什么。
这样,它就像预期的那样工作。
// fixContentHeight
$('#education')。click(function(){
$(INPUT [name ='education'])
.attr({
checked:$ ('#education')。is(':checked')
});
});
按照相同的方式为其他复选框部分。
// fixContentHeight();
$('h3 input [type = checkbox]')。click(function(){
$(INPUT [name ='+ this.name +'])
。 attr({
checked:$(this).is(':checked')
});
});
实际上是在您的HTML < UL>
标签缺失。
< ul>
< li data-role =collapsibleid =educationlayers>
< h3>
< input type =checkboxname =educationalid =educationclass =layers/>
< label for =education>教育< / label> ¥b $ b< / h3>
< fieldset data-role =controlgroup>
< input type =checkboxdata-mini =truename =educationid =daycareclass =layers/>
< label for =daycare>日托< / label>
< input type =checkboxdata-mini =truename =educationid =elementaryclass =layers/>
< label for =elementary> Elementary< / label>
< input type =checkboxdata-mini =truename =educationid =intermediateclass =layers/>
< label for =highschool>高中< / label>
< input type =checkboxdata-mini =truename =educationid =postsecondaryclass =layers/>
< label for =postsecondary>邮政中学< / label>
< / fieldset>
< / li>
< li data-role =collapsibleid =emergencylayers>
< h3>
< input type =checkboxname =emergencyid =emergencyclass =layers/>
< label for =emergency>紧急< / label> ¥b $ b< / h3>
< fieldset data-role =controlgroup>
< input type =checkboxdata-mini =truename =emergencyid =ambulanceclass =layers/>
< label for =ambulance>救护站< / label>
< input type =checkboxdata-mini =truename =emergencyid =fireclass =layers/>
< label for =fire>消防局< / label>
< input type =checkboxdata-mini =truename =emergencyid =hospitalclass =layers/>
< label for =hospital>医院< / label>
< input type =checkboxdata-mini =truename =emergencyid =policeclass =layers/>
< label for =police>警方< / label>
< / fieldset>
< / li>
< li data-role =collapsibleid =facilitieslayers>
< h3>
< input type =checkboxname =facilitiesid =facilitiesclass =layers/>
< label for =facilities>设施< / label> ¥b $ b< / h3>
< fieldset data-role =controlgroup>
< input type =checkboxdata-mini =truename =facilitiesid =commerceclass =layers/>
< label for =commerce>商会< / label>
< input type =checkboxdata-mini =truename =facilitiesid =cityfacilityclass =layers/>
< label for =cityfacility>城市设施< / label>
< input type =checkboxdata-mini =truename =facilityid =cityhallclass =layers/>
< label for =cityhall>市政厅< / label>
< input type =checkboxdata-mini =truename =facilitiesid =govfacilityclass =layers/>
< label for =govfacility>***机构< / label>
< / fieldset>
< / li>
< / ul>
通过你的代码并修改它。最后,我的复选框出现了问题。
您需要刷新 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);
});
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!
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
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')
});
});
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
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