如何在 JQuery Mobile 中选择或取消选中所有复选框

Question

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

.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 代码。

$(document).ready(function() {
    fixContentHeight();
    $('#education').click(function() {
        $("INPUT[name='education']").attr('checked', $('#education').is(':checked'));
    });
});

任何提示都会有所帮助！

Answer 1

我不知道这个函数（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

Answer 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>标签都已正确关闭，并且没有任何杂散元素缺少结束标签。

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

Answer 4

我想

，你想要这个：

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

这应该适用于所有 3' 教育、紧急情况、设施。

演示

Answer 5

我知道

这个问题很旧，但对于那些寻找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

Answer 6

堆栈溢出上的所有答案都对我不起作用。

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

你可以试试$("#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>