如何检查是否选中了两个单选按钮属性

时间:2015-03-03 21:14:01

标签: jquery checkbox

您好我已经创建了停车代码表单。其中有两个单选按钮属性。

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";
        }

我的编码工作正常。如果我选择的方式是正确的,任何人都可以告诉我。

2 个答案:

答案 0 :(得分:0)

为了解决这个问题,还需要更多的代码。 不过,也许我可以对你的问题有所了解。 假设您有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.
}

修改

我看到你想检查两个radiobutton是否在哪里检查,你可以这样做:

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

答案 1 :(得分:0)

检索&#34;已检查&#34;单选按钮组的状态可以按如下方式完成:

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

有意义的是,您要检查是否检查无线电组1)更改或2)表单提交时。 OP中并不完全清楚无线电在这种情况下是否具有后果 - 并且 @taxicala 的答案已经涵盖了这一点同样。

这是一个涵盖的示例,只是两个广播组都已被核对

&#13;
&#13;
$(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");
}
&#13;
.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;
}
&#13;
<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" />
&#13;
&#13;
&#13;