Question

请帮助解决这种情况：我有一个带有radiobuttons的页面：

<label>Delivery type:</label>
<input type="radio" name="delivery" value="7" class="delivery-item" id="del-type-7"  onclick=""><label class="label" for="del-type-7">From our office</label>
<input type="radio" name="delivery" value="6" class="delivery-item" id="del-type-6" onclick=""><label class="label" for="del-type-6">Mail Service</label>
<input type="radio" name="delivery" value="5" class="delivery-item" id="del-type-5" onclick=""><label class="label" for="del-type-5">AIR MAIL</label>
<input type="button" value="Submit order" id="order-button">

如果按下提交按钮后是否检查了任何单选按钮，我如何通过jquery检查？如果不是，则使用文本制作警报窗口：“请选择交付类型”。谢谢你的帮助！

Answer 1

使用jquery .is() / .prop()和:checked选择器。试试这个：

$('#order-button').click(function() {
    if (!$('.delivery-item').is(':checked')) {
        alert('Please choose delivery type');
    }
});

DEMO

或

$('#order-button').click(function() {
        if (!$('.delivery-item').prop(':checked')) {
            alert('Please choose delivery type');
        }
});

DEMO

Answer 2

这是一个有效的示例，您无需为每个input指定代码：

$('#order-button').click(function() {
    var elementCount = $('.delivery-item').length;
    var temporaryInteger = 0;
    $(".delivery-item").each(function(){
        if(!($(this).is(':checked'))){
            temporaryInteger++;
        } 
    });
    if(temporaryInteger === elementCount){
        alert("Please, choose delivery type");
    }
});

上面的代码使用类delivery-item循环遍历每个元素，并操纵变量以确定是否显示警报。

示例JSFIDDLE：http://jsfiddle.net/L45v9/

编辑：与其他答案者相比，此代码的优雅程度要低得多。使用他们的！

Answer 3

您可以使用:checked选择器，并测试length。如果是0，则没有选中的单选按钮：

$('#order-button').click(function() {
    if (!$('.delivery-item:checked').length) {
        alert('Please, choose delivery type...');
    }
});

Example Fiddle

单击提交按钮后如何检查页面上的单选按钮？

3 个答案: