Question

有一组复选框和答案（隐藏）。当用户选中复选框并单击按钮时，它会显示相关答案。每个复选框都与答案相关联。我能够为一个复选框功能工作。但是如何运行循环以使函数通过循环并根据所选复选框显示答案。我无法弄清楚如何创建一个循环的变量。

代码设置为：http://jsfiddle.net/rexonms/JcvHb/#base

SCRIPT

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

Answer 1

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();
        });
    });   

});

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

Answer 2

您可以像这样更改点击处理程序：

$("#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();

    });

});

<强> DEMO

Answer 3

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

Answer 4

首先给复选框指定相同的名称，但值不同。

<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();
    });
 });

Answer 5

只需收集所有:checked输入并使用.each()迭代它们，显示与该复选框名称相同的类的元素：

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

See demo

Answer 6

您是否考虑过预选复选框？这适用于所有情况：

jsfiddle

<强> JS

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

Answer 7

使用jsFiddle here。

将您的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;
        })
    })

});

Answer 8

我在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();
        });
    });
});

循环显示复选框并仅显示选定的答案

8 个答案:

See demo