使用单选按钮转到基于表单输入的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

回答

相关问题