使用单选按钮根据表单输入转到URL

Go to URL based on form input using radio buttons

本文关键字：输入 URL 表单 单选按钮      更新时间：2023-09-26

如何仅使用所选的单选按钮显示在URL中?我总是使用第一个单选按钮，无论选择哪个:

<form id="urlForm">
   <div id="bounds">
      <label><input type="radio" name="toggle" id="key"><span>On</span></label>
      <label><input type="radio" name="toggle" id="key"><span>Off</span></label>
   </div>
</form> 
<script>
$(document).ready(function() {
$('#urlForm').submit( function() {                        
   goUrl = '/?constraint=' + $('#key').val() + '+' + $('#key2').val();          
   window.location = goUrl;          
   return false;  // Prevent the default form behaviour     
    });
});
</script>

您的无线电输入应该有唯一的id。

  <label><input type="radio" name="toggle" id="key1" value="on"><span>On</span></label>
  <label><input type="radio" name="toggle" id="key2" value="off"><span>Off</span></label>

和你的JavaScript是接近的，但由于你是通过ID选择(这并不完全工作的单选按钮)，你需要改变你的选择器的单选输入:

$(document).ready(function() {
    $('#urlForm').submit( function() {
        window.location = '/?constraint=' + $('input[name="toggle"]:checked').val();          
        return false;  // Prevent the default form behaviour     
    });
});

$('input[name="toggle"]:checked'):这将选择一个name属性设置为toggle的表单输入，并进行检查。这可以完成任务，但这是一个相当低效的选择器。

这是一个jsfiddle: http://jsfiddle.net/jasper/HFBwH/

不应该有两个具有相同ID的元素。使用:

HTML: 

<form id="urlForm">
   <div id="bounds">
      <label><input type="radio" name="toggle" id="key1" value="On"><span>On</span></label>
      <label><input type="radio" name="toggle" id="key2" value="Off"><span>Off</span></label>
   </div>
</form>
JavaScript: 

$(document).ready(function() {
    $('#urlForm').submit( function() {                        
        goUrl = '/?constraint=' + $('#key1:checked, #key2:checked').val();
        window.location = goUrl;          
        return false;  // Prevent the default form behaviour     
    });
});

小提琴在这里:http://jsfiddle.net/cgyeY/

注:你真的不需要return false;部分，因为你正在从页面导航…

您的代码中有几个问题。

首先:你应该使用。preventdefault()函数来防止默认事件的发生。

第二:你的HTML中有两个元素具有相同的ID。id必须是唯一的。

第三:你的单选按钮上缺少value属性

修复后，您可以使用下面的代码片段来获取单选按钮的值…$('input:radio[name=bar]:checked').val();

相关文章：