缺席或一些无线电输入隐藏按钮具有填补

Question

我有测验，像这样的输入方式：

<form method="post"> 
    //for question 1 
    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio" name="quiz1" class="radio" value="answer a"/><span>a</span> 
    </label></div> 

    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio" name="quiz1" class="radio" value="answer b"/><span>a</span> 
    </label></div> 

    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio" name="quiz1" class="radio" value="answer c"/><span>a</span> 
    </label></div> 

    //for question 2 
    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio" name="quiz2" class="radio" value="answer a"/><span>a</span> 
    </label></div> 

    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio" name="quiz2" class="radio" value="answer b"/><span>a</span> 
    </label></div> 

    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio" name="quiz2" class="radio" value="answer c"/><span>a</span> 
    </label></div> 

    <input type="submit" value="submit"> 

如何隐藏提交按钮，如果我还没有回答所有无线电的问题吗？

我有这个功能，但不能很好

$(function() { 
    $('form:radio[class=radio]').on('click coba', function() { 
     $('#submit').toggle($('#radio').prop('checked')); 
    }).trigger('coba'); 
}); 

Answer 1

我认为你必须使用正确使用class和id属性之前创建的JS代码。

• 实际上，你没有办法确定哪些单选按钮属于第一个问题，并且属于第二，至少在包装容器中的每一个问题
• 没有无线电输入给相同的类名和他们的封皮，没有必要这样做。可能为所有无线电元件留下类“无线电”，并将该类“无线电包装”给予div
• 最重要的是：不要对多个元素使用相同的ID。这真的是错误的：为什么你所有的收音机输入都有“收音机”ID？ ID必须是唯一的，否则，你使用类

Answer 2

一个快速肮脏的方法是：

$(function() { 

    //hide submit button 
    $(":submit").hide(); 

    //The script needs to know how many radio button each group has 
    var groupRadioCount = $(":radio[name='quiz1']").length; 

    //All radio buttons (where name starts with 'quiz') 
    var $allRadio = $(":radio[name^='quiz']"); 

    //All radio checked length 
    var allSelectedLen = $allRadio.length/groupRadioCount; 

    $('form :radio').on('change', function() { 
     $(":submit").toggle($allRadio.filter(":checked").length === allSelectedLen); 
    }); 
}); 

A Demo

附：我从您的单选按钮中删除了ID属性，因为ID在任何给定的文档中都必须是唯一的！

Answer 3

在你的html表单中把id放在你的表单中并提交按钮...并且你的单选按钮的每个id都必须是唯一的...你可以通过id =“radio1”id =“radio2”id = “radio3”等。你说，你有一个提交按钮，为什么你的提交是一个输入。

<form id="main-form" method="post"> 
<button id="Submit" type="submit" value="submit"></button> 

对无线电的ID等

//for question 1 
    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio1" name="quiz1" class="radio" value="answer a"/><span>a</span> 
    </label></div> 

    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio2" name="quiz1" class="radio" value="answer b"/><span>a</span> 
    </label></div> 

    <div class="input-group radio"> 
    <label> 
    <input type="radio" id="radio3" name="quiz1" class="radio" value="answer c"/><span>a</span> 
    </label></div> 

在此之后，你可能会问另外一个问题了功能提交按钮

Answer 4

这里有鉴于你目前的HTML代码的范例：

$(function() { 
    $("form").submit(function (event) { 
     answer_groups = {}; 
     $self = $(this); 

     // First we group the radio names 
     $self.find(':radio').map(function (key, radio) { 
      answer_groups[radio.name] = true; 
     }) 

     // Then we check and see if there exists an answer for that group 
     Object.keys(answer_groups).map(function (group_name) { 
      // if not, then cancel the form being submitted. 
      if ($self.find(':radio[name="' + group_name + '"]:checked').length <= 0) { 
       alert('You must fill all questions before proceeding.'); 
       event.preventDefault(); 
       return false; 
      } 
     }) 
    }); 
}) 

这里的想法是简单地遍历无线电组并检查fo r每个人的价值。如果其中一个不存在，则取消正在提交的表单并返回警报（或某种类型的错误）。

演示：使用jQuery选择，以实现这个https://jsfiddle.net/t1s8e5ae/

Answer 5

尝试。试试下面的代码：

$(function() { 
 
    
 
    $('form input:radio').on('change', function() { 
 
     if($(":radio", "#myForm").length/3 === $(":radio:checked", "#myForm").length){ 
 
      $('#submit-form').show(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="post" id="myForm" > 
 
    //for question 1 
 
    <div class="input-group radio"> 
 
    <label> 
 
    <input type="radio" id="radio" name="quiz1" class="radio" value="answer a"/><span>a</span> 
 
    </label></div> 
 

 
    <div class="input-group radio"> 
 
    <label> 
 
    <input type="radio" id="radio" name="quiz1" class="radio" value="answer b"/><span>a</span> 
 
    </label></div> 
 

 
    <div class="input-group radio"> 
 
    <label> 
 
    <input type="radio" id="radio" name="quiz1" class="radio" value="answer c"/><span>a</span> 
 
    </label></div> 
 

 
    //for question 2 
 
    <div class="input-group radio"> 
 
    <label> 
 
    <input type="radio" id="radio" name="quiz2" class="radio" value="answer a"/><span>a</span> 
 
    </label></div> 
 

 
    <div class="input-group radio"> 
 
    <label> 
 
    <input type="radio" id="radio" name="quiz2" class="radio" value="answer b"/><span>a</span> 
 
    </label></div> 
 

 
    <div class="input-group radio"> 
 
    <label> 
 
    <input type="radio" id="radio" name="quiz2" class="radio" value="answer c"/><span>a</span> 
 
    </label></div> 
 

 
    <input type="submit" id="submit-form" style="display:none" value="submit">