Question

如果检查某个单选按钮，我试图编写jQuery代码来进行评估。如果选中该单选按钮，则会出现4个复选框，并且必须至少检查其中一个复选框。如果没有，浏览器会显示警报，而在另一种情况下，则会发送表单。

问题是，即使我选中了一个复选框，我也会收到浏览器提示，但我没有选中任何复选框，并且表单未提交。 Thx提前。

HTML：

<form method='POST' action='#'>
        <input type='radio' id='D_odg' name='c' value=''>

        <div id='D_div'>

            <input type='checkbox' value='1' name='c3' id='inputD1'><label>Label1</label>
            <input type='checkbox' value='2' name='c3' id='inputD2'><label>Label2</label>
            <input type='checkbox' value='3' name='c3' id='inputD3'><label>Label3</label>
            <input type='checkbox' value='4' name='c3' id='inputD4'><label>Label4</label>

        </div>

        <input type='submit' value='Send' id='button'>

</form>

jQuery的：

$('#button').click(function () {
    var checkedboxes = $('.D_div :checkbox:checked').length;
    if ($('#D_odg').prop('checked') && checkedboxes===0{
          alert('At least 1 checkbox must be selected');
          return false;               
     }else{
          alert('Form submited!');
     }           
});

Answer 1

您的代码几乎没有问题。

1）您有不正确的选择器来定位复选框的父div。 D_div是div的id，而不是class。因此，您需要使用ID选择器#而不是类选择器.：

var checkedboxes = $('#D_div :checkbox:checked').length;
                    //^^  ID selector here

2）您有语法错误。你还没有使用if条件

的大括号

if ($('#D_odg').prop('checked') && checkedboxes===0)
                                                // ^^ missing brace

<强> Working Demo

Answer 2

试试这个：你已经使用了类选择器而不是D_div的id选择器。您也可以将$('#D_odg').prop('checked')更改为$('#D_odg').is(':checked')，这看起来更具可读性，请参阅下面的代码

$('#button').click(function () {

        var checkedboxes = $('#D_div :checkbox:checked').length;

         if ($('#D_odg').is(':checked') && checkedboxes===0){
          alert('At least 1 checkbox must be selected');
          return false;

         }else{

          alert('Form submited!');

         }           

    });

Answer 3

你在=== 0之后错过了右括号。另外：checkbox：checked返回0.这有效：

$('#button').click(function () {
    var checkedboxes = $('[name="c3"]:checked').length;
    if ($('#D_odg').prop('checked') && checkedboxes===0){
        alert('At least 1 checkbox must be selected');
        return false;
    }else{
        alert('Form submited!');
    }           
});

选中单选按钮后，复选框变为必填项

3 个答案: