【问题标题】：How to check if two radiobutton Property checked如何检查是否检查了两个单选按钮属性
【发布时间】：2015-03-05 05:42:07
【问题描述】：

您好，我创建了一个停车记录表。其中有两个单选按钮属性。

Var1 有 4 个单选按钮 Var2 有 4 个单选按钮。

我想检查 Var1 和 Var2 的值是否一起检查。任何人都可以帮助我如何做到这一点？？

声明：

var NoOfTickets = $("
请从下方需要的停车票数量中选择
" + " 5 x $12 门票
" + " 10 x $12 门票
" + " 15 x $12 门票
" + " 20 x 12 美元的门票

");

var tickets = $("<div><strong></strong>" + 
"<input type=\"radio\" id=\"Option5\" name=\"days\" value=\"402\"/> <strong>5 x $6 tickets<br/>" + 
"<input type=\"radio\" id=\"Option6\" name=\"days\" value=\"402\"/> <strong>10 x $6 tickets<br/>" +
"<input type=\"radio\" id=\"Option7\" name=\"days\" value=\"402\"/> <strong>15 x $6 tickets<br/>" +
"<input type=\"radio\" id=\"Option8\" name=\"days\" value=\"402\"/> <strong>20 x $6 tickets<br/><br/>");

条件：

//If Single option checked from 8 options
        if ($("#Option1").is(":checked")){
            $("#SelectedRegTypeId option[value=1454]").attr("selected", "selected");
            comments +="5 tickets x $12 one day | ";
        }
        else if($("#Option2").is(":checked")){
            $("#SelectedRegTypeId option[value=1456]").attr("selected", "selected");
            comments +="10 tickets x $12 one day | ";
        }
        else if($("#Option3").is(":checked")){
            $("#SelectedRegTypeId option[value=1457]").attr("selected", "selected");
            comments +="15 tickets x $12 one day | ";
        }
        else if($("#Option4").is(":checked")){
            $("#SelectedRegTypeId option[value=1458]").attr("selected", "selected");
            comments +="20 tickets x $12 one day | ";
        }
        else if($("#Option5").is(":checked")){
            $("#SelectedRegTypeId option[value=1459]").attr("selected", "selected");
            comments +="5 tickets x $6 one day | ";
        }
        else if($("#Option6").is(":checked")){
            $("#SelectedRegTypeId option[value=1460]").attr("selected", "selected");
            comments +="10 tickets x $6 one day | ";
        }
        else if($("#Option7").is(":checked")){
            $("#SelectedRegTypeId option[value=1463]").attr("selected", "selected");
            comments +="15 tickets x $6 one day | ";
        }
        else if($("#Option8").is(":checked")){
            $("#SelectedRegTypeId option[value=1464]").attr("selected", "selected");
            comments +="20 tickets x $6 one day | ";
        }

// If any two option checked from 8 options         
        if($("#Option1").is(":checked") && $("#Option5").is(":checked")){
            $("#SelectedRegTypeId option[value=1465]").attr("selected", "selected");
            comments +="5 x $6 tickets @$90";
        }
        else if($("#Option1").is(":checked") && $("#Option6").is(":checked")){
            $("#SelectedRegTypeId option[value=1466]").attr("selected", "selected");
            comments +="10 x $6 tickets @$120";
        }
        else if($("#Option1").is(":checked") && $("#Option7").is(":checked")){
            $("#SelectedRegTypeId option[value=1467]").attr("selected", "selected");
            comments +="15 x $6 tickets @$135";
        }
        else if($("#Option1").is(":checked") && $("#Option8").is(":checked")){
            $("#SelectedRegTypeId option[value=1468]").attr("selected", "selected");
            comments +="20 x $6 tickets @$180";             
        }
        else if($("#Option2").is(":checked") && $("#Option5").is(":checked")){
            $("#SelectedRegTypeId option[value=1470]").attr("selected", "selected");
            comments +="5 x $6 tickets @$150";
        }
        else if($("#Option2").is(":checked") && $("#Option6").is(":checked")){
            $("#SelectedRegTypeId option[value=1472]").attr("selected", "selected");
            comments +="10 x $6 tickets @$180";
        }
        else if($("#Option2").is(":checked") && $("#Option7").is(":checked")){
            $("#SelectedRegTypeId option[value=1474]").attr("selected", "selected");
            comments +="15 x $6 tickets @$195";
        }
        else if($("#Option2").is(":checked") && $("#Option8").is(":checked")){
            $("#SelectedRegTypeId option[value=1475]").attr("selected", "selected");
            comments +="20 x $6 tickets @$240";
        }
        else if($("#Option3").is(":checked") && $("#Option5").is(":checked")){
            $("#SelectedRegTypeId option[value=1476]").attr("selected", "selected");
            comments +="5 x $6 tickets @$210";
        }
        else if($("#Option3").is(":checked") && $("#Option6").is(":checked")){
            $("#SelectedRegTypeId option[value=1477]").attr("selected", "selected");
            comments +="10 x $6 tickets @$240";
        }
        else if($("#Option3").is(":checked") && $("#Option7").is(":checked")){
            $("#SelectedRegTypeId option[value=1478]").attr("selected", "selected");
            comments +="15 x $6 tickets @$255";
        }
        else if($("#Option3").is(":checked") && $("#Option8").is(":checked")){
            $("#SelectedRegTypeId option[value=1479]").attr("selected", "selected");
            comments +="20 x $6 tickets @$300";
        }
        else if($("#Option4").is(":checked") && $("#Option5").is(":checked")){
            $("#SelectedRegTypeId option[value=1480]").attr("selected", "selected");
            comments +="5 x $6 tickets @$270";
        }
        else if($("#Option4").is(":checked") && $("#Option6").is(":checked")){
            $("#SelectedRegTypeId option[value=1481]").attr("selected", "selected");
            comments +="10 x $6 tickets @$300";
        }
        else if($("#Option4").is(":checked") && $("#Option7").is(":checked")){
            $("#SelectedRegTypeId option[value=1482]").attr("selected", "selected");
            comments +="15 x $6 tickets @$315";
        }
        else if($("#Option4").is(":checked") && $("#Option8").is(":checked")){
            $("#SelectedRegTypeId option[value=1483]").attr("selected", "selected");
            comments +="20 x $6 tickets @$360";
        }

我的编码现在工作正常。谁能告诉我我选择的方式是否正确。

【问题讨论】：

而不是那么努力地解释场景。发布您的代码！
您是否在检查每个选定收音机的价值？或者，只是两个广播组都有选择？
你有什么理由在你所有的收音机上使用value=\"402\"吗？

标签： jquery checkbox

【解决方案1】：

需要更多代码来解决这个问题。不过，也许我可以对您的问题有所了解。假设您有 2 个单选按钮集：

<input type="radio" name="Var1" value='1' />
<input type="radio" name="Var1" value='2' />
<input type="radio" name="Var1" value='3' />
<input type="radio" name="Var1" value='4' />

<input type="radio" name="Var2" value='1' />
<input type="radio" name="Var2" value='2' />
<input type="radio" name="Var2" value='3' />
<input type="radio" name="Var2" value='4' />

使用 jQuery，您可以按如下方式检索这两个值：

var val1 = $("input[name='Var1']").val();
var val2 = $("input[name='Var2']").val();

然后你可以使用你需要的验证类型，EG：

if (val1 === val2) {
    //Some fancy validation here.
}

编辑

我看到你想检查两个单选按钮是否都被选中，你可以这样做：

if (val1 && val2) {
    //Both radiobuttons have values
}

【讨论】：

【解决方案2】：

检索单选按钮组的“已选中”状态可以如下完成：

var isChecked = $("input[name=radioGroupName]:radio").(":checked");

有意义的是，您需要检查单选组是否在 1) 更改时或 2) 在表单提交时进行检查。 OP 并不完全清楚无线电 values 在这种情况下是否有影响 - @taxicala 的回答也涵盖了这一点。

这是一个示例，只是两个无线电组都被选中：

$(function () {

    var input1 = $("input[name=Var1]:radio");
    var input2 = $("input[name=Var2]:radio");
    var submit = $("#submit");

    // Radio group "Var1" changes:
    // Check that both radio groups are selected
    
    input1.change(function () {
        var input2 = $("input[name=Var2]:radio");
        var checked1 = isChecked($(this));
        var checked2 = isChecked(input2);
      
        if (checked1 && checked2) {
            toggleValid($('#result'), true);
        } else {
            toggleValid($('#result'), false);
        }
    });
    
    // Radio gorup "var2" changes:
    // Check that both radio groups are selected
    
    input2.change(function () {
        var input1 = $("input[name=Var1]:radio");
        var checked2 = isChecked($(this));
        var checked1 = isChecked(input1);
      
        if (checked1 && checked2) {
            toggleValid($('#result'), true);
        } else {
            toggleValid($('#result'), false);
        }
    });
    
    //Submit clicked --> pretend its a form
    // Check that both radio groups are selected
    
    submit.click(function(e){
        var input1 = $("input[name=Var1]:radio");
        var input2 = $("input[name=Var2]:radio");
        var result = $('#result');
        var checked1 = isChecked(input1);
        var checked2 = isChecked(input2);
        
        // if invalid, stop the form submission
        if(!checked1 && !checked2) {
            e.preventDefault();
            toggleValid(result, false);
            return;
        } else {
            toggleValid(result, true);
        }
        
    });

});

// Checks if an element has "checked" property

function isChecked(elem) {
    if (elem.is(":checked")) { 
        return true; 
    } else {
        return false;
    }
}

// Toggles the css and values of the results box

function toggleValid(elem, isValid){
    if (!isValid){
        elem.css({
            "background-color":"red"
        }).text("Invalid");
        return;
    }
    
    elem.css({
        "background-color":"green"
    }).text("Valid");
}

.row1 {
    background-color: pink;
}
.row2 {
    background-color: lightblue;
}
#result {
    height: 100px;
    width: 100px;
    background-color: red;
    color: white;
    margin-top: 20px;
    text-align: center;
}

#submit{
    margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row1">
    <input type="radio" name="Var1" value="1" />
    <input type="radio" name="Var1" value="2" />
    <input type="radio" name="Var1" value="3" />
    <input type="radio" name="Var1" value="4" />
</div>
<br>
<div class="row2">
    <input type="radio" name="Var2" value="1" />
    <input type="radio" name="Var2" value="2" />
    <input type="radio" name="Var2" value="3" />
    <input type="radio" name="Var2" value="4" />
</div>
<div id="result">Invalid</div>
<input id="submit" type="button" value="Submit" />

【讨论】：