Автоматическая отправка формы после проверки переключателя

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

$(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 2

Если вы хотите проверить, если все группы имеют кнопку проверяемое радио, то вы можете сделать:

// 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 
} 

Answer 3

Попробуйте это

$(document).ready(function() { $('.radiobtn').change(function(){ 
    if($('.radio-group [type=radio]:checked').length == 2) 
    { 
    $('form').submit(); 
} 
    }); 
    }); 

Answer 4

Onchange кнопки радио, с помощью 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>