如何在JavaScript中檢查/取消選中動態單選按鈕？

Question

這個問題大概被問了一百萬遍，但我無法解決這個問題。

我有3個正常創建的單選按鈕。 我想在第一個和第三個單選按鈕之間放置第四個單選按鈕。 單擊此單選按鈕時，第三個和第四個單選按鈕應出現，並且取消選中此單選按鈕應使它們消失。

為了澄清我創建了一個小提琴

所以我嘗試的是下面。 我用收音機創建了一個新的div。 在第一台收音機后注入。 這樣行得通！ 當我檢查新創建的收音機時，將出現第三和第四。 這樣工作就可以了！ 問題是當我單擊第一個單選按鈕時，第二個單選按鈕保持選中狀態，因此第三個和第四個單選按鈕仍然可見。 我以為它可以與.prop一起.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屬性分組。 如果要確保一次只能選擇一個，請確保它們具有相同的name 。

我所做的一切，讓您的jsfiddle工作是改變name的單選按鈕進行動態增加的shipment_method 。

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>');

編輯：我必須進行一些其他更改以使其隱藏並正確顯示其他按鈕

Answer 2

要成為同一組的一部分，您需要使該組中所有按鈕的“名稱”屬性相同。