javascript - 如何在 JavaScript 中选中/取消选中动态单选按钮？

Question

这个问题可能被问了一百万次，但我无法让这个问题发挥作用。

我有 3 个单选按钮，它们都是正常创建的。我想在第一个和第三个单选按钮之间放置第四个单选按钮。单击此单选按钮时，应出现第三个和第四个单选按钮，取消选中此单选按钮将使它们消失。

为了澄清，我创建了一个 fiddle

所以我尝试的如下。我用 radio 创建了一个新的 div。在第一次广播后注入(inject)它。这工作正常!当我检查新创建的 radio 时，会出现第三个和第四个。所以工作正常! 问题是当我单击第一个 radio 时，第二个 radio 保持选中状态，因此第三个和第四个 radio 仍然可见。我认为它可以与 .prop 一起使用，否则我显然做错了什么。

有人吗？

$(document).ready(function () {
    var newContainer = $('<div class="gui-spacer"></div><div class="gui-block-option"><div class="gui-field"><div class="gui-radio"><div class="tm-radio"><input type="radio" value="" name="shipment_method_wholesale" id="gui-form-shipping-wholesale" class=""></div><label for="gui-form-shipping-wholesale">Ik wil graag bij mijn groothandel bestellen(Afhalen)</label></div><div class="gui-field-content"><p>text over bestellen bij groothandel</p></div></div></div>');

    $('#gui-form .gui-block-option:not(:first)').hide();
    $('#gui-form-shipping-wholesale').prop('checked', false);
    $('#gui-form .gui-block-option:first').after(newContainer);


    $('input[name="shipment_method_wholesale"]').bind('change', function () {

        var showOrHide = ($(this).val() == 1) ? false : true;
        $('#gui-form .gui-block-option:not(:first) ').toggle(showOrHide);
        $(this).prop('checked', true);
    });
});

Answer 1

单选按钮按其name 属性分组。如果您想确保一次只能选择一个，请确保它们具有相同的名称。

我所做的一切都是为了得到你的 jsfiddle工作方法是更改​​您动态添加到 shipment_method 的单选按钮的 name。

var newContainer = $('<div class="gui-spacer"></div><div class="gui-block-option"><div class="gui-field"><div class="gui-radio"><div class="tm-radio"><input type="radio" value="" name="shipment_method" id="gui-form-shipping-wholesale" class=""></div><label for="gui-form-shipping-wholesale">Ik wil graag bij mijn groothandel bestellen(Afhalen)</label></div><div class="gui-field-content"><p>text over bestellen bij groothandel</p></div></div></div>');

编辑:我必须进行一些其他更改才能正确隐藏和显示其他按钮