选中检查特定单选按钮

时间:2017-06-28 05:56:54

标签: javascript jquery

我只是试图在我的jquery方法中返回true / false,具体取决于检查2个单选按钮以及是否选中

我已经尝试了几件事,但未能做到这一点,它仍然提交表单而不会给错误选择按钮。

HTML代码

<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">

<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" checked="" iscod="0" onclick="selectPayment(this)">

<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" checked="true" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">

<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">

的Javascript

function checkOrderForm(frm) {
    var paymentSelected = false;
    var shippingSelected = false;

    // Check whether the payment method is selected
    for (i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].name == 'shipping' && frm.elements[i].checked) {
            shippingSelected = true;
        }

        if (frm.elements[i].name == 'payment' && frm.elements[i].checked) {
            paymentSelected = true;
        }
    }

    if (!shippingSelected) {
        alert(flow_no_shipping);
        return false;
    }

    if (!paymentSelected) {
        alert(flow_no_payment);
        return false;
    }

3 个答案:

答案 0 :(得分:0)

您可以使用$("#payment_1").checked检查收音机是否已被选中。同样,您可以使用其他ID来检查它们是否被选中。

这是小提琴: https://jsfiddle.net/bf8bo43t/

答案 1 :(得分:0)

如果我正确理解你的问题,如果选中了单选按钮的两个,你只想通过这个测试。目前,只要检查每个组中的一个单选按钮,代码变量将设置为true,忽略另一个单选按钮的状态。

例如,如果仅检查了一个shipping单选按钮,则shippingSelected变量将设置为true并保持为真。

解决此问题的方法是首先将shippingSelectedpaymentSelected设置为true,如果发现其中一个单选按钮未选中,则该变量将设置为false。

以下是一个例子:

var paymentSelected = true;
var shippingSelected = true;

// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
    if (frm.elements[i].name == 'shipping' && !frm.elements[i].checked) {
        shippingSelected = false;
    }

    if (frm.elements[i].name == 'payment' && !frm.elements[i].checked) {
        paymentSelected = false;
    }
}

答案 2 :(得分:0)

尝试以下代码,

<强> HTML

<form method="post" name="frm_payment_types">
    <label class="checkout-item" for="payment_1">Cash On Delivery</label>
    <input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">

    <label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
    <input type="radio" name="payment" class="radio" id="payment_2" value="9" iscod="0" onclick="selectPayment(this)">

    <label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
    <input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">

    <label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
    <input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
    <br />
    <input type="submit" name="submit" onclick="return checkOrderForm();" />
</form>

<强>的Javascript

<script type="text/javascript">
    function validateForm(){
        var payment_1 = document.getElementById('payment_1');
        var payment_2 = document.getElementById('payment_2');

        var ECS_NEEDINSURE_1 = document.getElementById('ECS_NEEDINSURE_1');
        var ECS_NEEDINSURE_2 = document.getElementById('ECS_NEEDINSURE_2');

        if((payment_1.checked == true || payment_2.checked == true) && (ECS_NEEDINSURE_1.checked == true || ECS_NEEDINSURE_2.checked == true)){
            return true;
        }
        else if(payment_1.checked == false && payment_2.checked == false){
            alert("Please select Cash On Delivery or Credit Card / Debit Card.");
        }
        else if(ECS_NEEDINSURE_1.checked == false && ECS_NEEDINSURE_2.checked == false){
            alert("Please select Home Delivery or Self-pickup.");
        }
        return false;
    }
</script>