0

グループ内の古い「チェック済み」ボックスを「オフ」にする関数を作成する必要があります。基本的にはグループAとグループBで、グループAのアイテムをチェックして送信すると、グループAのアイテムとグループBのアイテムが表示されます。ただし、問題はグループAのアイテムを選択して表示し、グループBと同じものです。グループAのアイテムは引き続き表示されます。トリックを実行するjQueryの組み込み関数はありますか？コードはhttp://jsfiddle.net/rexonms/mJgcK/で設定されています

HTML

<h1>Find Services You Need</h1>
<select class="selectOne">
<option>Please Select One</option>
<option name="one">Basic Needs</option>
<option name="two">Disabilities Services for Adults</option>

</select><!--selectOne-->



<div class="options">
<div class="option one">
    <h3>Basic Needs</h3>
    <input type="checkbox" name="oneA">Employment services<br>
    <input type="checkbox" name="oneB">Financial assistance<br>
    <input type="checkbox" name="oneC">Food<br>
    <input type="checkbox" name="oneD">Housing<br>
    <input type="checkbox" name="oneE">Legal issues<br>
</div><!--optionOne-->

<div class="option two">
    <h3>Disabilities Services for Adults </h3>
    <input type="checkbox" name="twoA">Advocacy<br>
    <input type="checkbox" name="twoB">Coordinated Care<br>
    <input type="checkbox" name="twoC">Employment Support<br>
    <input type="checkbox" name="twoD">Housing<br>
    <input type="checkbox" name="twoE">Recreation & Social Activities<br>
    <input type="checkbox" name="twoF">Referrals & Financial Options<br>
    <input type="checkbox" name="twoG">Services for the Deaf and Hard of Hearing<br>
</div><!--optionOne-->


</div><!--options-->

<div id="showMeContainer"><div id="showMe">Show Me</div>

</div><!--button-->


<div class="answers">
<div class="answerTitle"><h3>Title Here</h3></div><!--answerTitle-->

<div class="one">

    <div class="oneA answer">
        <p>Employment services</p>
    </div><!--oneA-->
    <div class="oneB answer" >
        <p>Financial assistance</p>
    </div><!--oneB-->
    <div class="oneC answer">
        <p>Food</p>        
    </div><!--oneC-->
    <div class="oneD answer">
        <p>Housing</p>
    </div><!--oneD-->
    <div class="oneE answer">
        <p>Legal Issues</p>
    </div><!--oneE-->
</div><!--answer-->

<div class="two">
    <div class="twoA answer">
        <p>Advocacy</p>
    </div><!--oneA-->
    <div class="twoB answer" >
        <p>Cordinated Care</p>
    </div><!--oneB-->
    <div class="twoC answer">
        <p>Employment Support</p>        
    </div><!--oneC-->
    <div class="twoD answer">
        <p>Housing</p>
    </div><!--oneD-->
    <div class="twoE answer">
        <p>Recreation & Social Activities</p>
    </div><!--oneE-->
    <div class="twoF answer">
        <p>Referrals & Financial Options</p>
    </div><!--oneF-->
    <div class="twoG answer">
        <p>Services for the Deaf and Hard of Hearing</p>
    </div><!--oneF-->
</div><!--two-->


</div><!--answers-->​

そしてjQuery1.2.6（私には新しいバージョンを使用する特権がありません）

$(document).ready(function(){

$('.option').hide();//Hiding all options
$('.answer').hide(); //Hiding all the answers   
$('#showMeContainer').hide(); //Hiding the show me button
$('.answerTitle').hide();


$('.selectOne').change(function(event){


    var name = $('.selectOne option:selected').attr('name');
    //alert(name);
    $('#showMeContainer').hide(); 
    $('.option').hide();
    $('.' + name).show();
    $('#showMeContainer').show(); 


});

$('#showMe').click(function(event) {  
    $('.answer').hide();
    $('.answerTitle').hide();
    var checked = $('.option').find(':checked');
    $.each(checked, function() {
        var name = this.name;
        $('.' + name).show();
         $('.answerTitle').show();

    });

    var x = $('#compBody').height() + 50;// Getting the height on the div
    $('#pageBody').css('height',x); // updating the height of the outer div

});
});​
4

2 に答える 2

2

次の行を追加するだけです

$(".options [type=checkbox]").attr('checked', false);

の$('.selectOne').change()

これにより、リストの選択が変更されたときにすべてのチェックボックスがオフになります。

デモ

于 2012-07-03T15:15:17.723 に答える
0

あなたがまだ答えを探しているかどうかはわかりませんが、このデモでそれを見ることができます

各チェックボックスをクリックイベントに接続しました。これにより、他のグループの選択されたチェックボックスを削除して、チェックボックスの選択が解除されることを心配せずに任意のグループを選択できるようになります。

于 2012-07-03T15:50:25.123 に答える