选中单选按钮后自动提交表单

Question

在每个单选按钮组都有一个选中的单选按钮后，如何自动提交表单？jQuery中是否有适用于以下场景的功能：

​

<div class="radio-group">
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn1">
  </div>
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn1">
  </div>
</div>

<div class="radio-group">
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn2">
  </div>
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn2">
  </div>
</div>

Answer 1

单选按钮的长度，使用each()函数可以查看单选群组长度是否等于0。

​

$(document).ready(function(){
$("input:radio").change(function(e){
  
    var all_answered = true;
    $("input:radio").each(function(){
        var name = $(this).attr("name");
        if($("input:radio[name="+name+"]:checked").length == 0)
        {
            all_answered = false;
            
        }
        
    });
    if(all_answered== true)
    {
  alert('form submit');
    }
    alert(all_answered);
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-group">
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn1"> 1
  </div>
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn1">1
  </div>
</div>

<div class="radio-group">
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn2">2
  </div>
  <div class="radio-option">
    <input type="radio" class="radioBtn" name="radioBtn2">2
  </div>
</div>

​

Answer 2

 $(document).ready(function() { 
   $('input[name=radioBtn2]').change(function(){
     if($('input[name=radioBtn2]').is(':checked')){
        $('form').submit();
     }
   });
   $('input[name=radioBtn1]').change(function(){
   if($('input[name=radioBtn1]').is(':checked')){
        $('form').submit();
     }
   });    
  });

Answer 3

如果要检查是否所有组都具有选中的单选按钮，则可以执行以下操作：

// find all groups
var grps = $( ".radio-group" );    
// next we try find a group with a radio that has no checked item
var hasUnchecked = grps.filter(function(idx, el) {
    // if group has radio button that is checked, 
    // we return false, else - return true 
    return $( el ).find("input:checked")? false : true;
});
// finally in hasUnchecked we have `.radio-group` 
// items with no checked radio found
if (!hasUnchecked) {
    // groups with unchecked radio not found
    // submit a form
}