Question

我的测验输入形式如下：

lstEmployee

如果我没有回答所有电台问题，如何隐藏提交按钮？

我有这个功能，但效果不好

 <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">

Answer 1

尝试使用jQuery选择器来实现这一目标。请尝试以下代码：

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

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

你实际上无法确定哪个单选按钮属于第一个问题，哪个属于第二个问题，至少将每个问题都包装在一个容器中
不要给无线电输入和div包装器提供相同的类名，没有必要这样做。可能会为所有无线电元素留下“无线电”类，并将“无线电包装”类提供给divs
最重要的是：不要对多个元素使用相同的ID。这是非常错误的：为什么你的所有无线电输入都有“无线电”ID？ id必须是唯一的，否则你使用class

Answer 3

快速肮脏的方式是：

# this second option replaces the call to parent with child and passes the 
# named arguments that have been matched within the call to parent
# 

parent2 <- function(a,b,c){
  Call <- match.call()
  Call[[1]] <- quote(child)
  eval(Call)
}

A Demo

P.S。我已从您的单选按钮中删除了$(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); }); });属性，因为ID在任何给定文档中必须是唯一的！

Answer 4

在你的html表单中，在你的表单中输入id并提交按钮......你的单选按钮的每个id都必须是唯一的...你可以通过id =＆＃34; radio1＆＃34改变你的id ; ID =＆＃34;第二广播电台＆＃34; ID =＆＃34; radio3＆＃34;等等..你说，你有一个提交按钮，为什么你的提交是一个输入。

<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 5

以下是您当前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;
            }
        })
    });
})

这里的想法只是迭代无线电组并检查每个组的价值。如果不存在，则取消正在提交的表单并返回警报（或某种错误）。

演示：https://jsfiddle.net/t1s8e5ae/

如果某些无线电输入有填充，则显示或隐藏按钮

5 个答案: