jquery - 如何通过 jquery 验证收音机 [必需]

Question

我有 10 组收音机。每组有2个或3个或更多收音机没关系。您需要从每组中至少选择 1 台收音机。

当您提交表单时，如果其中任何一个（组）留空，它必须检查并返回错误。

我尝试了一些代码，但无法解决。我编写了这段代码来查找并显示错误，但它会一一查找，因此如果有 1 个已满，则提交表单。

 $('#myForm').submit(function () {

     $(".radiogrup").each(function () {
         var sel = $(this).find("input[type='radio']:checked").val();

         if (sel == null) {
             alert("error msg");
             return false;

         }

     });


 });

html:

如果你知道如何配置 required="required" 也许我可以使用它。

<div class="radiogrup">
    <form id="form1" name="form1" method="post" action="">
      <p>
        <label>
          <input type="radio" name="RadioGroup1" value="radyo" id="RadioGroup1_0" />
          Radyo</label>
        <br />
        <label>
          <input type="radio" name="RadioGroup1" value="radyo" id="RadioGroup1_1" />
          Radyo</label>
        <br />

        <input name="" type="submit" />
      </p>
    </form>
</div>

Answer 1

尝试以这种方式更正您的 JS 代码：

$('form').on("submit",function () {
    var valid=true; 
    $(".radiogrup").each(function(){
        var sel=$(this).find("input:radio:checked");
         if(!sel.length){
             valid=false;
         }
    });
    if(!valid){
        alert("error msg"); 
        return false;
    }

});

看到这个：http: //jsfiddle.net/32aew/

Answer 2

可能这个可以帮助你不要为此使用 $.each

$('#myForm').submit(function () {    
var $elems = $(".radiogrup");

        (function fetch(i) {
            if(i >= $elems.length) return;  // no elems left

            var $elem = $elems.eq(i);

            var sel = $($elem).find("input[type='radio']:checked").val();
            if (sel == null) {
                     alert("error msg"); // just don't call fetch again
            }
            else
            {
                 fetch(i + 1); //next one
                 //apply more code here if form validation successfull
            }
        })(0);  // start with first elem
});

Answer 3

function ValidateRadioButtons() {  //Function for Validating If Radio Button isselected
     var ischecked = false;
    $('.radiogrup').children('radio').each(function () {   //LoopingthroughradioButtons
    // "this" is the current element(radio) in the loop
      if ($(this).is(':checked')) {
          ischecked = true; //Radio Button is Checked
        }
    });
   if (ischecked == true) {
    alert("Validation Passed");
    }
   else {
    alert("Please select a Radio Button");
  }
}

Answer 4

此代码为您工作

//jQuery

$(function(){

 $('#myForm').submit(function () {
         if ($('input[type=radio]:checked').val() != "") {
             return true;
         }

alert('error msg')
return false

     });
})

//HTML

<form id="myForm" name="form1" method="post" action="">
      <p>
        <label>
          <input type="radio" name="RadioGroup1" value="" id="RadioGroup1_0" />
          radyo
          </label>
        <br />
        <label>
          <input type="radio" name="RadioGroup1" value="radyo" id="RadioGroup1_1" />
          Radyo</label>
        <br />

        <input name="" type="submit" />
      </p>
    </form>