使用單選按鈕轉到基於表單輸入的URL

如何只使用選定的單選按鈕顯示在URL中？無論選擇哪一個，我總是使用第一個單選按鈕：使用單選按鈕轉到基於表單輸入的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>

來源

2011-12-02 user1018958

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

來源

2011-12-02 17:51:34 Jasper

您應該添加'價值'對那些'輸入'... –

@JosephSilber好電話，我在jsfiddle做了，但忘記了這裏。答案已更新。 – Jasper

你不應該有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/

附：你真的不需要return false;的一部分，因爲你是從頁面導航...

來源

2011-12-02 17:52:19

你有幾個問題在你的代碼。

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

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

第三：你缺少你的單選按鈕

那些固定後，就可以使用下面的代碼片段搶單選按鈕的值value屬性... $('input:radio[name=bar]:checked').val();

來源

2011-12-02 17:53:11 Benjam

'return false;'在這種情況下與'event.preventDefault（）'做同樣的事情。 – Jasper

但是你應該使用'.preventDefault（）'來防止其他意想不到的事情發生... http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Benjam

點2和3是有效，但你的第一點是錯的。首先，返回false與（preventDefault）（幾乎）完全相同就是這種情況。另外，由於'window.location = goUrl'將離開當前頁面，這將停止任何JavaScript執行...... –

使用單選按鈕轉到基於表單輸入的URL

回答

相關問題