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

Question

如何只使用选定的单选按钮显示在 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>

Answer 1

您的 radio 输入应具有唯一 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/