如何检查是否至少选中了一个单选按钮

Question

我实际上停留在表单验证上，因为我想检查是否至少选中了一个单选按钮。 我这样做是为了我的文本输入验证成功，但是对于单选按钮却不起作用。

 $('#next').click(function() { var isValid = true; $('.personal-informations, .gender, .goal').each(function(i, obj) { //.personal-informations are my text inputs in another section of my form and .gender and .goal are my radio button classes if ($(this).val().trim() === '') { $("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250); $(this).closest('.questions').find('.error').css("visibility","visible"); $(this).css('border-color', "#B33C3D"); $(this).closest('.questions').find('.error').text('Dies ist ein Pflichtfeld.'); isValid = false; } if ($(this).is(':checked').length > 0) { } else { $(this).closest('.questions').find('.error').css("visibility","visible"); $(this).closest('.questions').find('.error').text('This field is required.'); isValid = false; } }); }); 

 <div class="field goals-icon goals"> <span class="title">Some Text</span> <div class="questions"> <div class="questions-fc-1 questions-fcm-2 radio-button"> <input id="muscle-goal_1" name="goal" class="goal" value="1" aria-required="true" type="radio"> <label id="fc-goal_1" aria-controls="#muscle-goal_1"> <img src="" alt=""> <span>Some Text</span> <div class="error"></div><!--This is my error class which should be visible if there is no checkbox from this section checked--> </label> </div> <div class="questions-fc-1 questions-fcm-2 radio-button"> <input id="weight-loss-goal_2" name="goal" class="goal" value="2" aria-required="true" type="radio"> <label id="fc-goal_2" aria-controls="#weight-loss-goal_2"> <img src="" alt=""> <span>Some Text</span> </label> </div> <div class="questions-fc-1 questions-fcm-2 radio-button"> <input id="figure-workout-goal_3" name="goal" class="goal" value="3" aria-required="true" type="radio"> <label id="fc-goal_3" aria-controls="#figure-workout-goal_3"> <img src="" alt=""> <span>Some Text</span> </label> </div> <div class="questions-fc-1 questions-fcm-2 radio-button"> <input id="health-goal_4" name="goal" class="goal" value="4" aria-required="true" type="radio"> <label id="fc-goal_4" aria-controls="#health-goal_4"> <img src="" alt=""> <span>Some Text</span> </label> </div> </div> </div> <div type="next" id="next" class="forward-button"></div> 

Answer 1

.is()返回true，false或undefined，因此在不使用.length情况下检查真值。 另外，您还需要重构该条件，以将dom树向上遍历到容器（或表单），然后在其中查找同级。

替换为： if ($(this).is(':checked').length > 0) {

这样： if ($(this).parents('.questions').find('input[type="radio"]').is(':checked')) {

根据您的示例，我不确定是否需要调整.parents()或.find()选择器。 您可能需要使它们更具体，以便坚持使用无线电组（而不是查找所有无线电）。 这是一个演示，查看控制台，它将记录验证失败： https : //jsfiddle.net/jpnaccn3/