jQuery形式的radio输入

Posted 2023-05-09

【中文标题】jQuery形式的radio输入

【英文标题】：JQuery form of radio input

【发布时间】：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' 时，必须选择其中一个收音机

【参考方案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');
  

);