根據使用單選按鈕輸入的表單轉到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

您的無線電輸入應具有唯一的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/

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/

---

PS：您真的不需要return false; 部分，因為您要離開頁面...

Answer 3

您的代碼中有幾個問題。

首先：您應該使用.preventDefault（）函數來防止發生默認事件。

第二：您的HTML中有兩個具有相同ID的元素。 ID應該是唯一的。

第三：您缺少單選按鈕上的value屬性

修復這些問題后，您可以使用以下代碼段獲取單選按鈕的值... $('input:radio[name=bar]:checked').val();