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>

LIVEDEMO2を参照してください

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

LIVEDEMO3を参照してください

于 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

私はあなたがこれを望んでいると思います：

$('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

この質問は古いと思いますが、jQuery2.xとjQueryMobile 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 に答える
0

StackOverflowのすべての答えが私にはうまくいきません。

以下は私が最終的に見つけた解決策です：

ラジオのラベルの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 に答える