Question

我有一个网页，向用户询问两个简单的是 - 否问题。在每个问题下，有一组两个单选按钮，用户可以选择是或否。

<p>Question 1 yes or no?</p>

<input type="radio" name="q1" id="q1-y" value="Yes">Yes
<input type="radio" name="q1" id="q1-n" value="No">No 

<p>Question 2 yes or no?</p>

<input type="radio" name="q2" id="q2-y" value="Yes">Yes
<input type="radio" name="q2" id="q2-n" value="No">No

如果用户对两个问题选择“是”，则需要显示一些HTML，这些HTML将提供指向某个页面的链接。如果用户对一个或两个问题回答“否”，则会出现一些替代HTML，这将显示另一条消息。

不能像表单一样提交按钮，这必须是基于javascript / jquery的解决方案，而不是服务器端。页面需要：

1）检测两组问题的答案。然后 2）立即显示某些HTML，具体取决于a）是否已回答两者，或者b）是否已给出一次或更多的NO。

基本上，逻辑应该是：

if( /*both radio buttons answered*/ ){
   if( /*both answers are yes*/ ){
      /*show HTML set 1*/  
   } else {
      /*show HTML set 2*/
   }
}

我试过在这个网站上查看问题，但我似乎无法找到解决这个问题的方法。如果有任何需要澄清，请告诉我。

非常感谢！

Answer 1

不同的解决方案：

$( "input" ).change(function() {

 var buttons = jQuery("input:radio:checked").get();
 var values = $.map(buttons, function(element) {
    return $(element).attr("value");
 });

 if(values == "Yes,Yes") {
   alert("both yes");
 }
 else {
  //do something else
 }

});

演示：Multiple Radiobuttons

不喜欢检查那样的字符串，但可以适当的方式进行调整。

Answer 2

试试这个：

$(document).ready(function(){
$("#yep").hide();
$("#nope").hide();  

$(".nones").click(function(){
  $("#yep").hide();
  $("#nope").show();
});

$(".yipis").click(function(){
   var checkeo = 1;
   $( ".yipis" ).each(function( index ) {
      if($(this).is(":checked") == false)
      {
          checkeo = 0;
      };
    });
    if(checkeo){
        $("#nope").hide(); 
        $("#yep").show();
    }
});    
});

工作小提琴：http://jsfiddle.net/robertrozas/84o46mqd/

Answer 3

以下是访问所需值的可能方法。 JSFiddle

HTML

<p>Question 1 yes or no?</p>

<input type="radio" name="q1" id="q1-y" value="Yes">Yes
<input type="radio" name="q1" id="q1-n" value="No">No 

<p>Question 2 yes or no?</p>

<input type="radio" name="q2" id="q2-y" value="Yes">Yes
<input type="radio" name="q2" id="q2-n" value="No">No

<p>
    <input type="button" id="finished" value="Submit" />
</p>

<div id="htmlarea"></div>

的JavaScript

我发现在阅读单选按钮时，jQuery is() function和pseudo class :checked会有所帮助。

$("#finished").click(function() {
    var q1y = $("#q1-y").is(":checked");
    var q1n = $("#q1-n").is(":checked");
    var q2y = $("#q2-y").is(":checked");
    var q2n = $("#q2-n").is(":checked");

    if (q1y && q2y) {
        $("#htmlarea").html("Both yes");
    } else if (q1n && q2n) {
        $("#htmlarea").html("Both no");
    } else {
        var html = "";
        if (q1y) html += "Q1 yes. ";
        if (q1n) html += "Q1 no. ";
        if (q2y) html += "Q2 yes. ";
        if (q2n) html += "Q2 no. ";
        if (html=="") html = "None selected";
        $("#htmlarea").html(html);
    }
});

如果您想重定向到其他网页，请使用window.location.href = "http://someurl.com";，而不是设置HTML文字。

Answer 4

一种方法，给定以下HTML（请注意附加的data-*元素中的自定义<div>属性，用于标识这些元素与哪个选项相关）：

<p>Question 1 yes or no?</p>
<input type="radio" name="q1" id="q1-y" value="Yes" />Yes
<input type="radio" name="q1" id="q1-n" value="No" />No
<p>Question 2 yes or no?</p>
<input type="radio" name="q2" id="q2-y" value="Yes" />Yes
<input type="radio" name="q2" id="q2-n" value="No" />No

<div class="result" data-relatesTo="Yes">All choices are 'yes'</div>
<div class="result" data-relatesTo="No">All choices are 'no'</div>

哪个适用于以下jQuery：

// caching the radio elements on the page:
var radios = $('input[type="radio"]'),
// getting the number of unique radio 'groups':
    radioGroups = $.unique($('input[type="radio"]').map(function () {
        return this.name;
    }).get());

// binding an anonymous function as a change-event handler:
radios.change(function () {
    // getting all the checked radio inputs:
    var checked = radios.filter(':checked'),
    // creating an object that maps to the relevant values/choices to be made:
        choice = {
            'yes': checked.filter(function () {
                return this.value.toLowerCase() === 'yes';
            }).get(),
                'no': checked.filter(function () {
                return this.value.toLowerCase() === 'no';
            }).get()
        };

    // if all groups have a checked radio input:
    if (checked.length === radioGroups.length) {
        // iterate over the '.result' div elements:
        $('div.result').each(function (i, el) {
            // using 'toggle(switch)' to show/hide the element,
            // the switch tests whether the choice related to the current
            // element is equal to the number of radioGroups. If it is,
            // it's shown, otherwise it's hidden.
            $(this).toggle(choice[el.getAttribute('data-relatesTo').toLowerCase()].length === radioGroups.length);
        });
    }
});

JS Fiddle demo

或者，使用相同的HTML，以下jQuery方法也可以工作：

var radios = $('input[type="radio"]'),
    radioGroups = $.unique($('input[type="radio"]').map(function () {
        return this.name;
    }).get());

radios.change(function () {
    var checked = radios.filter(':checked'),
    // getting all the unique chosen values (in lowercase):
        opts = $.unique(checked.map(function(){
            return this.value.toLowerCase();
        }).get());

    if (checked.length === radioGroups.length) {
        // hide all the '.result' elements:
        $('div.result').hide()
            // filter the 'div.result' elements:
            .filter(function(){
                // if the number of opts (chosen values) is 1
                // (all choices are the same) and the 'data-relatesTo' attribute
                // of the current element we're filtering is equal to that single
                // option, then the element is retained in the selector
                return opts.length === 1 && this.getAttribute('data-relatesTo').toLowerCase() === opts[0].toLowerCase();
        })
        // and so we show it:
        .show();
    }
});

JS Fiddle demo

参考文献：

JavaScript的：
- Element.getAttribute()。
- String.prototype.toLowerCase()。
jQuery的：
- $.unique()。
- each()。
- filter()。
- get()。
- hide()。
- map()。
- show()。
- toggle()。

在jquery中检测2组单选按钮的选择

4 个答案:

工作小提琴：http://jsfiddle.net/robertrozas/84o46mqd/