1

チェックボックスと回答（非表示）のセットがあります。ユーザーがチェックボックスをオンにしてボタンをクリックすると、関連する回答が表示されると想定されます。各チェック ボックスは回答に関連付けられています。1つのチェックボックスに対して機能することができました。しかし、関数がループを通過し、選択したチェックボックスに基づいて回答を表示するようにループを実行するにはどうすればよいですか。ループする変数を作成する方法がわかりませんでした。

コードはhttp://jsfiddle.net/rexonms/JcvHb/#baseに設定されています。

脚本

$(document).ready(function(){  
$(".answer").hide(); //Hiding all the answers         

$("#showMe").click(function(event){       
    var isChecked = $('[name=oneA]').is(':checked');
    if(isChecked)
      $(".oneA").show();
    else
        $(".oneA").hide();
       });
 });​

HTML

<div class="options">
    <div class="optionOne">
        <h2>Section Heading</h2>
        <input type="checkbox" name="oneA">option One A<br>
        <input type="checkbox" name="oneB">option One B<br>
        <input type="checkbox" name="oneC">option One C<br>
        <input type="checkbox" name="oneD">option One D<br>
    </div><!--optionOne-->

    <button type="button" id="showMe">Show Me</button>

</div><!--option-->

<div class="answers">
    <div class="answerOne">
        <h2>Answer Heading</h2>
        <div class="oneA answer" name="oneA">
            <p>Content from one A</p>
        </div><!--oneA-->
        <div class="oneB answer" name="oneB">
            <p>Content from one B</p>
        </div><!--oneB-->
        <div class="oneC answer" name="oneC">
            <p>Content from one C</p>        
        </div><!--oneC-->
        <div class="oneD answer" name="oneD">
            <p>Content from one D</p>
        </div><!--oneD-->
    </div><!--answerOne-->
</div><!--answers-->​
4

8 に答える 8

1

チェックボックスに同じ名前を付けることから始めますが、値は異なります。

<div class="optionOne">
    <h2>Section Heading</h2>
    <input type="checkbox" name="one" value="oneA">option One A<br>
    <input type="checkbox" name="one" value="oneB">option One B<br>
    <input type="checkbox" name="one" value="oneC">option One C<br>
    <input type="checkbox" name="one" value="oneD">option One D<br>
</div><!--optionOne-->

次に、チェックされたすべてのチェックボックスをループして、目的の div 名の値を取得します。

$("#showMe").click(function(event){       
    var isChecked = $('[name=one]').is(':checked');
    $(isChecked).each(function(){
      var value = $(this).val();
      $("div[name=" + value + "]").show();
    });
 });​
于 2012-06-22T15:43:30.700 に答える
1

次のようにクリック ハンドラーを変更できます。

$("#showMe").click(function(event){

    // get all checked items
    var checked = $('.optionOne').find(':checked');

    // for each of them
    $.each(checked, function() {

        // re-hide them all
        $(".answer").hide();

        // get the name
        var name = this.name;

        // and show the div that has the same class name
        $('.' + name).show();

    });

});

デモ

于 2012-06-22T15:38:42.447 に答える
0

JSFiddleで起動して実行しましたが、ソースコードもここにあります。 http://jsfiddle.net/dceast/SEfNF/18/

HTML

<div class="options">
    <div id="checkbox-options" class="optionOne">
        <h2>Section Heading</h2>
        <input type="checkbox" name="oneA">option One A<br>
        <input type="checkbox" name="oneB">option One B<br>
        <input type="checkbox" name="oneC">option One C<br>
        <input type="checkbox" name="oneD">option One D<br>
    </div><!--optionOne-->

    <button type="button" id="showMe">Show Me</button>

</div><!--option-->

<div id="answers" class="answers">
    <div class="answerOne">
        <h2>Answer Heading</h2>
        <div id="oneA" class="oneA answer" name="oneA">
            <p>Content from one A</p>
        </div><!--oneA-->
        <div id="oneB" class="oneB answer" name="oneB">
            <p>Content from one B</p>
        </div><!--oneB-->
        <div id="oneC" class="oneC answer" name="oneC">
            <p>Content from one C</p>        
        </div><!--oneC-->
        <div id="oneD" class="oneD answer" name="oneD">
            <p>Content from one D</p>
        </div><!--oneD-->
    </div><!--answerOne-->
</div><!--answers-->​

jQuery

$(function() {
    // Get all of the single answers
    var $answers = $('.answer', '#answers');
    // The show me button
    var $showMe = $('#showMe');
    // All of the checkboxes
    var $checkboxes = $('input', '#checkbox-options');

    // hide the answers    
    $answers.hide();

    $showMe.click(function() {
        // Get all the checked ones
        var $checked = $checkboxes.filter(":checked");
        // Loop through them and show the ones that have
        // been checked
        $.each($checked, function(index, value) { 
            var $answerToShow = $('#' + value.name);
            $answerToShow.show();
        });
    });
});​
于 2012-06-22T15:58:38.337 に答える
0

チェックボックスの事前選択を検討しましたか? これはあらゆる場合に機能します。

jsfiddle

JS

$("#showMe").click( function(){
    $(".answer").hide();
    $(':checkbox:checked').each( function() {
        $('.'+$(this).attr('name')).show();
    });
}).trigger('click');
于 2012-06-22T15:44:09.827 に答える
0

ここでjsFiddle を使用します。

JSを次のように変更しました-

$(document).ready(function(){

    $(".answer").hide(); //Hiding all the answers (could be done in CSS?)

    $("#showMe").click(function(event){  
        $(".answer").hide();
        $('input [name^=one]').each(function(index, element){
            $(element).is(':checked') ? $('div [name=' + $(element).attr("name") + ']').show() : null;
        })
    })

});​
于 2012-06-22T15:53:48.603 に答える