2

カテゴリサブカテゴリごとにチェックボックスを設定しています...

Company
    Microsoft
    Apple

 Country
     USA
     UK

各項目に付けられたチェックボックス。したがって、[会社] の横にあるチェックボックスをクリックすると、[Microsoft] と [Apple] の横にあるチェックボックスが自動的にマークされ、[国] を選択すると、[米国] と [英国] のオプションがオンになります。また、それらすべてを選択するすべて選択オプションも必要です。

javascriptまたはjqueryを使用してチェックボックスチェックプロパティを追加することは可能ですか?

<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
 <input id="modalEntity" class="entity1" type="checkbox" name="CompanySub">Microsoft
 <input id="modalEntity" class="entity2" type="checkbox" name="CompanySub">Apple
 <input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
 <input id="modalEntity" class="entity3" type="checkbox" name="CountrySub">USA
 <input id="modalEntity" class="entity4" type="checkbox" name="CountrySub">UK
4

3 に答える 3

5

ここで簡単なデモを参照してください: http://jsfiddle.net/Pfmuq/2/ またはより単純な: http://jsfiddle.net/Pfmuq/3/

id常に一意である必要があることに注意してください。コードを読むときは休んでください。あなたparentとSub命名のパターンに気づいたので、それを考慮しました。

また、私はあなたのIDとクラスを自由に切り替えることに注意してくださいanyhooコードは以下にあります:)

これが役立つことを願って、:)

コード

$('input[name="Company"],input[name="Country"]').click(function(){
    if ($(this).is(':checked')){
          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true);

    } else {
          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false);   
    }
});
​

2番目のデモのコード

$('input[name="Company"],input[name="Country"]').click(function(){
          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',this.checked);
});
​

HTML

<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
 <input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft
 <input class="modalEntity" id="entity2" type="checkbox" name="CompanySub">Apple
<br /> 
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
 <input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA
 <input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK​​​
于 2012-07-08T04:14:12.930 に答える
0

HTML を少し変更することができれば、(国と会社だけでなく) 好きなだけ多くのグループで機能する一般的なソリューションを考え出すことができます。

HTML:

<input type="checkbox" class="entityCheckboxHeader" name="Company">Company
<input type="checkbox" name="CompanySub">Microsoft
<input type="checkbox" name="CompanySub">Apple
<input type="checkbox" class="entityCheckboxHeader" name="Country">Country
<input type="checkbox" name="CountrySub">USA
<input type="checkbox" name="CountrySub">UK

<strong>JavaScript:

$(function(){
    $('.entityCheckboxHeader').click(function() {
        $('[name="'+this.name+'Sub"]').prop('checked', this.checked);
    });
});​

HTML を変更する立場にない場合は、Tats_innit からの回答が適切で簡潔な解決策です。

ここにこのソリューションの JSFiddle があります: http://jsfiddle.net/L5qqb/

于 2012-07-08T04:19:10.873 に答える
0

まず、チェックボックスをラップして<label>、ラベルがクリックされたときにチェックボックスもトグルされるようにする必要があります（ユーザーフレンドリー）。

次に、リストを使用してチェックボックスをグループ化することをお勧めします。（必要に応じてcssでスタイルを設定できます）。

このようなもの：

<ul>
    <li class="entityCheckboxHeader1" >
        <label><input type="checkbox" id="entityCheckboxHeader1">Company</label>
        <ul>
            <li><label><input id="modalEntity11" class="entity1" type="checkbox" name="company[]">Microsoft</label></li>
            <li><label><input id="modalEntity12" class="entity2" type="checkbox" name="company[]">Apple</label></li>
        </ul>
    </li>
    <li class="entityCheckboxHeader2">
        <label><input type="checkbox" id="entityCheckboxHeader2">Country</label>
        <ul>
            <li><label><input id="modalEntity21" class="entity3" type="checkbox" name="country[]">USA</label></li>
            <li><label><input id="modalEntity22" class="entity4" type="checkbox" name="country[]">UK​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&lt;/label></li>
        </ul>
    </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

これで、この非常に単純な jquery を使用して、タスクを完了することができます。

$("li :checkbox").change(function(){
    $(this).closest("li").find("ul :checkbox").prop("checked", $(this).is(":checked"));
});​

http://jsfiddle.net/eKTAk/3/

フィールドの名前を変更したことに注意してください。これにより、php a script (投稿フォーム) で次のように読み取ることができます。

$companies = $_POST['companies']; //Gets the array of values for the checked companies

$countries = $_POST['countries']; //Gets the array of values for the checked companies
于 2012-07-08T04:19:17.550 に答える