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

2

http://jsfiddle.net/iambriansreed/tQtTf/

$(function(){

    $(".answer").hide(); //Hiding all the answers   

    $("#showMe").click(function(event){ 
        $(".answer").hide();        
        $('.options :checked').each(function(){
            $('.answer.'+$(this).attr('name')).show();
        });
    });   

});​

只要您使用相同的系统，它就可以扩展到无限的选项/答案。

于 2012-06-22T15:39:28.447 回答
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 回答
1 
$(document).ready(function()
{
    var $answers = $(".answer").hide();

    $("#showMe").click(function()
    {
        $answers.hide();

        $('input:checked').each(function()
        {
            $answers.filter( '.' + this.name ).show();
        });
    });
});​

这是你的小提琴：http: //jsfiddle.net/JcvHb/7/

于 2012-06-22T15:41:18.650 回答
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 回答
0

只需收集所有输入并通过显示与该复选框名称相同的类的元素来:checked遍历它们：.each()

$("#showMe").click(function(event){   
    var $checked = $('.optionOne').find('input:checked');
    $checked.each(function(i, el){
        $('.' + $(this).attr('name')).show();
    });            
});

看演示

于 2012-06-22T15:41:06.480 回答
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 回答
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 回答