jQuery形式的radio输入答案

【问题标题】：JQuery form of radio inputjQuery形式的radio输入
【发布时间】：2016-10-17 06:02:24
【问题描述】：

我正在尝试制作一种简单形式的无线电输入，最多可以选择 1 个：

<form id='forma' action='predmeti.php' method='GET'>
        1:<input type='radio' name='godina' value='1'/>
        2:<input type='radio' name='godina' value='2'/>
        3:<input type='radio' name='godina' value='3'/>
        <input type='button' id='ok' value='Izaberi godinu!'>
</form>

如何仅在选择了一个时才允许表单提交，如果没有选择则阻止提交？通过单击 id='ok' 按钮提交表单。

【问题讨论】：

勾选后是否自动提交？或者您需要仅在选中一项时才允许提交？
@MinaJacob 不是自动的，但是当按下按钮 id='ok' 时，必须选择其中一个收音机

标签： jquery forms radio-button

【解决方案1】：

根据评论更新。请试试这个。

$(document).ready(function() {
       $('#ok').on('click', function(){
        if($("#forma input[type='radio']:checked").length == 1){
            $(this).closest("form").submit();
        }
       });
    });

【讨论】：

不是点击收音机，而是点击收音机下方的按钮，id='ok'的按钮
根据评论更新了答案。请检查。

【解决方案2】：

为其中一个单选按钮添加必需的属性，这是一个示例
http://codepen.io/mozzi/pen/zBBzxo?editors=1010

<form id='forma' action='predmeti.php' method='GET'>
        1:<input type='radio' name='godina' value='1' required></input>
        2:<input type='radio' name='godina' value='2'></input>
        3:<input type='radio' name='godina' value='3'></input>
        <input type="submit" value="send">
</form>

【讨论】：

谢谢，但是有没有办法做到这一点，而不会使收音机被圈起来并显示警报？我已经想到应该发生什么
当有人点击提交但没有任何检查时，您想到的场景是什么？应该怎么办？
我有一个跨度设置为display: none;它更改为display: inline

【解决方案3】：

如果选中[name=godina] 元素之一，您可以使用event.preventDefault()、.is() 和参数:checked 来阻止默认操作以提交form

$("input[type=button]").click(function(e) {
  e.preventDefault();
  if ($("[name=godina]").is(":checked")) this.parentElement.submit()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id='forma' action='' method='GET'>
        1:<input type='radio' name='godina' value='1'/>
        2:<input type='radio' name='godina' value='2'/>
        3:<input type='radio' name='godina' value='3'/>
        <input type='button' id='ok' value='Izaberi godinu!'>
</form>

【讨论】：

【解决方案4】：

检查这个更新的链接http://codepen.io/mozzi/pen/zBBzxo?editors=1010它应该做你想做的事

<form id='forma' action='predmeti.php' method='GET'>
  1:<input type='radio' name='godina' value='1' required></input>
  2:<input type='radio' name='godina' value='2'></input>
  3:<input type='radio' name='godina' value='3'></input>

  <span id="msg" style="display: none">hello world </span>
  <input type='button' id='ok' value='Izaberi godinu!'>
</form>

$('#ok').on('click', function() {
  if ($('input[type=radio]:checked').length > 0) {
    $('#msg').css('display', 'none');
  } else {
    $('#msg').css('display', 'inline');
  }

});

【讨论】：