Question

如何仅使用所选单选按钮显示在网址中？无论选择哪一个，我总是使用第一个单选按钮：

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

Answer 1

您的无线电输入应具有唯一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')：这会选择名称属性设置为toggle的表单输入，也会进行检查。这可以完成工作，但是效率很低的选择器。

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

Answer 2

您不应该有2个具有相同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/

P.S。你真的不需要return false;部分，因为你正在离开页面......

Answer 3

您的代码中有几个问题。

首先：你应该使用.preventDefault（）函数来防止发生默认事件。

第二：HTML中有两个具有相同ID的元素。 ID应该是唯一的。

第三：您缺少单选按钮上的value属性

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

使用单选按钮转到基于表单输入的URL

3 个答案: