2

我有几个可折叠的复选框，并且正在尝试选中/取消选中该部分中的所有框。

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'));
    });
});

任何提示都会有所帮助！

4

6 回答 6

5

我不关心这个函数 ( 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：

实际上，您的 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>

参考现场演示 2

更新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");
});

参考现场演示 3

于 2012-07-04T15:28:05.607 回答
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>标签都正确关闭，并且没有任何杂散元素缺少关闭标签。

于 2012-07-04T15:59:59.700 回答
1 
$('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/

于 2012-07-04T15:27:35.697 回答
0

Stack Overflow 上的所有答案都对我不起作用。

以下是我最终找到的解决方案：

你可以试试收音机标签的id在$("#radioLabel1").trigger("click"); 哪里。radioLabel1

我的工作代码：

<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>
于 2014-11-18T08:16:31.443 回答
0

我想，你想要这个：

$('h3 :checkbox').change(function() {
    //'$(this).parent().next()' is appropriate 'fieldset' element
    $(this).parent().next().find(':checkbox').prop('checked', $(this).prop('checked'));
});

这应该适用于所有 3`教育、应急、设施。

演示

于 2012-07-04T15:28:16.450 回答
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 演示

于 2014-07-23T07:18:44.630 回答