Question

:)所以我正在尝试创建一个用户问题类型表单，它不必发送给任何人只需显示一个div一旦检查某些单选按钮，如果他们某些单选按钮没有检查然后显示一个不同的div，但当网页打开/刷新我想要显示的div没有显示时（如果这有意义吗？）。我在这里找到了一些代码尝试，但它对我没有用，我是JS＆amp; Jquery但希望有人能解释我的问题。请在下面找到我的代码。

Jquery的？

if($('input[value=yes1]:checked,
 input[value=yes2]:checked, 
 input[value=yes3]:checked,
 input[value=yes4]:checked').length == 4){

$("#correct").show();

 }else{

$("#correct").hide();

HTML

<div class="row">
<div class="left">

    <div class="right answer">
        <div class="leftradio">
            <input type="radio" id="yes1" value="yes1" name="iCheck1">
            <label>Yes</label>
            </input>
        </div>

        <div class="rightradio">
            <input type="radio" id="no1" name="iCheck1">
            <label>No</label>
            </input>
        </div>

    </div>

</div>
<div class="right">

    <div class="right answer">
        <div class="leftradio">
            <input type="radio" id="yes2" value="yes2" name="iCheck2">
            <label>Yes</label>
            </input>
        </div>

        <div class="rightradio">
            <input type="radio" id="no2" name="iCheck2">
            <label>No</label>
            </input>
        </div>

    </div>
</div>

是没有是没有

CSS

#correct{width:100%; height:50px; background:green; display:none;}
#incorrect{width:100%; height:50px; background:red; display:none;}

Answer 1

我认为这就是你要找的东西。我不得不将“正确”答案的数量改为2，因为这就是你所拥有的所有HTML。

JS：

$( "input" ).on( "click", function() {
    if($('input[value=yes1]:checked, input[value=yes2]:checked').length === 2){
       $("#correct").show();
    }else{
       $("#correct").hide();
    }
});

工作JS小提琴：http://jsfiddle.net/akj84vrq/12/

Answer 2

这样的小事可能会让你得到你想要的东西。 http://jsfiddle.net/uu512erm/

通过$('input:radio').change(function(){}收听广播输入上的更改事件然后只需在里面添加逻辑。

Answer 3

我不确定这是否可以通过CSS实现。

现在，您正在检查代码中不存在的某些值/元素（即input[value=yes3]:checked，您没有输入该值，请自行检查）。< / p>

我不明白你想要完成什么，但我仍然会尝试提供帮助，因为你是新手，让它保持基本：

if ($('input[value=yes1]').is(':checked') && $('input[value=yes2]').is(':checked')) {
  // this will fire only if input with values yes1 and yes2 is checked
  $('div_to_show').show(); // put your own selectors here
  $('div_to_hide').hide(); // put your own selectors here
} 

if ($('input[value=no1]').is(':checked') && $('input[value=no2]').is(':checked')) {
  // this will fire only if input with values no1 and no2 is checked
  $('some_other_div_to_show').show(); // put your own selectors here
  $('some_other_div_to_hide').hide(); // put your own selectors here
}

if ($('input[value=yes1]').is(':checked') && $('input[value=no1]').is(':checked')) {
  # this will fire only if both input with values yes1 and no1 is checked
  $('some_other_div_to_show').show(); # put your own selectors here
  $('some_other_div_to_hide').hide(); # put your own selectors here
} 

# and so on... just type in your conditions and that's it.

如果您还需要其他一些案例，只需使用此模式添加它们，或者在所有场景中构造一个复杂的if语句。

如果检查了某些单选按钮，显示div则显示不同的div？

3 个答案: