无线电不同的名称 - 只检查一个 [英] radio different names - only check one
问题描述
我在基于 xtcommerce 的解决方法中使用了许多单选按钮.这些单选按钮是动态创建的，并为每个组赋予不同的名称，如下所示:
I'm using many radio-buttons in a xtcommerce-based-workaround. Those radiobuttons are dynamically created and given a different name for each group like this:
<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]" 等)的每个第一个单选按钮都会被预先选择，并且每个单选按钮的每个值都会被提交.
Now I want to "group" those radio-buttons back together, so that I can only choose one radio-button at a time. Now by default every first radio-button of each "group" (name="id[1]", name="id[2]", etc.) is preselected and every value of each radio-button gets submitted.
我在 stackoverflow 上找到了这个脚本，只选择一个单选按钮:
I found this script here on stackoverflow to only select one radio-button:
$(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();
});
});
这是一个小提琴:
到目前为止，这有效，我只能在我的页面上选择一个单选按钮.但是你也可以在我的 js-fiddle 中看到一个问题:
This works so far, I can only select one radio-button on my page. But there is one problem as you can see in my js-fiddle too:
第一组的第一个单选按钮已被预选 - 没关系.但是，如果您选择同一组的另一个单选按钮，则选择-标记"不会改变.仅当您单击另一个组的单选按钮时，所选单选按钮才会被选中(在 FF (和 Opera 以及 IE9)中发现另一个错误，如果我选择任何其他单选按钮；在 Chrome 中，它通过选择另一个组来更改).如果您留在同一组中，则选择也不会改变.
The first radio-button of the first group is preselected - that's ok. But if you choose another radio-button of the same group, the selection-"mark" does not change. Only if you click a radio-button of another group the chosen radio-button gets selected (found another bug in FF ( and Opera as well as IE9), the selection-mark is not shown if I choose any other radio-button; in Chrome it changes by selecting another group). If you stay in this same group, the selection doesn't change either.
在我的本地安装中，我有一个动态变化的更新程序，它说明了所选项目的新价格(抱歉，我无法在小提琴中实现它).到目前为止，这有效，即使我选择同一组的另一个单选按钮，价格也会更新，但如前所述，选择-标记"不会改变......
On my local based installation I have got a dynamically-changing updater, which states the new price of the selected item (sorry I couldn't implement this to the fiddle). This works so far, the price gets updated even if I choose another radio-button of the same group, but as described before the selection-"mark" does not change...
对这个问题有什么想法吗?
Any idea for this problem?
推荐答案
您不需要取消选中所有单选按钮，然后重新选中当前单选按钮.取消选中之前选中的按钮就足够了.
You don't need to uncheck all radio buttons, then re-check the current one. Un-checking the previously checked button suffices.
作为这种简化的副作用，您的错误也得到了修复.
As a side effect of this simplification, your bug is also fixed.
$(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);
});
});
这篇关于无线电不同的名称 - 只检查一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
