我在基于 xtcommerce 的解决方法中使用了许多单选按钮。这些单选按钮是动态创建的,并为每个组指定不同的名称,如下所示:
<input type="radio" name="id[1]" value="40">
<input type="radio" name="id[1]" value="30">
<input type="radio" name="id[1]" value="20">
<input type="radio" name="id[1]" value="10">
<input type="radio" name="id[2]" value="40">
<input type="radio" name="id[2]" value="30">
<input type="radio" name="id[2]" value="20">
<input type="radio" name="id[2]" value="10">
<input type="radio" name="id[3]" value="10">
....
现在我想将这些单选按钮重新“分组”在一起,这样我一次只能选择一个单选按钮。现在默认情况下,每个“组”的每个第一个单选按钮(name =“id [1]”,name =“id [2]”等)都会被预先选择,并且每个单选按钮的每个值都会被提交。
我在 stackoverflow 上找到了这个脚本,只选择一个单选按钮:
$(document).ready(function () {
$('input[type=radio]').prop('checked', false);
$('input[type=radio]:first').prop('checked', true)
$('input[type=radio]').click(function (event) {
$('input[type=radio]').prop('checked', false);
$(this).prop('checked', true);
event.preventDefault();
});
});
这是一个 fiddle :
到目前为止,这有效,我只能选择页面上的一个单选按钮。但也有一个问题,正如您在我的 js-fiddle 中看到的那样:
第一组的第一个单选按钮已预先选择 - 没关系。但如果您选择同一组的另一个单选按钮,则选择“标记”不会改变。仅当您单击另一个组的单选按钮时,所选单选按钮才会被选中(在 FF 中发现另一个错误(编辑:和 Opera 以及 IE9),如果出现以下情况,则不会显示选择标记我选择任何其他单选按钮;在 Chrome 中,它会通过选择另一个组来更改)。如果您留在同一组中,选择也不会改变。
在我的本地安装中,我有一个动态变化的更新程序,它规定了所选项目的新价格(抱歉,我无法将其实现到 fiddle )。到目前为止,这是有效的,即使我选择同一组的另一个单选按钮,价格也会更新,但如之前所述,选择“标记”不会改变...
对这个问题有什么想法吗?
最佳答案
您不需要取消选中所有单选按钮,然后重新选中当前的单选按钮。取消选中之前选中的按钮就足够了。
作为这种简化的副作用,您的错误也得到了修复。
$(document).ready(function () {
$('input[type=radio]').change(function() {
// When any radio button on the page is selected,
// then deselect all other radio buttons.
$('input[type=radio]:checked').not(this).prop('checked', false);
});
});
关于jquery - 电台不同名称 - 只检查一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13839995/