6

我在基于 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();
  });
});

这是一个小提琴：

http://jsfiddle.net/3xD7V/1/

到目前为止，这有效，我只能在我的页面上选择一个单选按钮。但是你也可以在我的 js-fiddle 中看到一个问题：

http://jsfiddle.net/ksZxV/

第一组的第一个单选按钮是预先选择的——没关系。但是，如果您选择同一组的另一个单选按钮，则选择-“标记”不会改变。只有当您单击另一个组的单选按钮时，所选单选按钮才会被选中（在 FF （编辑：和 Opera 以及 IE9 中发现另一个错误），如果我选择任何其他单选按钮，则不会显示选择标记; 在 Chrome 中，它通过选择另一个组来更改）。如果您留在同一组中，则选择也不会改变。

在我基于本地的安装中，我有一个动态变化的更新程序，它说明了所选项目的新价格（对不起，我无法在小提琴中实现它）。到目前为止，这有效，即使我选择同一组的另一个单选按钮，价格也会更新，但如前所述，选择-“标记”不会改变......

对这个问题有什么想法吗？

4

4 回答 4

17

您无需取消选中所有单选按钮，然后重新选中当前单选按钮。取消选中之前选中的按钮就足够了。

作为这种简化的副作用，您的错误也得到了修复。

$(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);
    });
});​
于 2012-12-12T12:53:06.253 回答
1

你为什么在event.preventDefault();那里......因为你的点击函数内的代码正在这样做。

删除event.preventDefault();并尝试

这是小提琴..

http://jsfiddle.net/ksZxV/1/

于 2012-12-12T12:45:37.457 回答
1

只需删除event.preventDefault();它就会起作用。

检查这个JSFIDDLE

于 2012-12-12T12:46:41.030 回答
1

具有不同名称但只有一个选项的单选按钮

工作示例：https ://codepen.io/Vivekparashar/pen/wvwLwxY

JS：

$(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();
  });
});

HTML：

<div class="mycontainer">   
    <h3 class="heading">Radio Button With Different Name/Group but Single Selection</h3>
    <hr>
    <form>
        <div class="radioDiv">
            <label class="11">Radio Button 1</label>
            <input type="radio" name="radiobutton1">
        </div>
        <div class="radioDiv">
            <label>Radio Button 2</label>
            <input type="radio" name="radiobutton2">
        </div>
        <div class="radioDiv">
            <label>Radio Button 3</label>
            <input type="radio" name="radiobutton3">
        </div>
        <div class="radioDiv">
            <label>Radio Button 4</label>
            <input type="radio" name="radiobutton4">
        </div>
        <div class="radioDiv">
            <label>Radio Button 5</label>
            <input type="radio" name="radiobutton5">
        </div>
    </form>
</div>
于 2019-12-26T13:56:12.033 回答