jQuery单选按钮未正确切换

问题是：我在加载页面时动态创建了X个单选按钮的列表，一旦创建并显示了列表，我只希望用户能够按照正常的单选按钮组一次选择1个。但是，用户可以选择多个选项，就好像单选按钮单独运行，而不是作为一组单选按钮运行一样

以下是我在document ready上调用的代码：

    // On document ready...
    $(document).ready(function() {

        // add click events to any inputs to the radio btn div, setup jQuery UI radio buttonset...
        $("#radioX").on("click", "input", displayProductDetails).buttonset();

        // get all the products
        $.get(
                "php/getProducts.php",
                function(responseData){

                    // set the products array
                    products = responseData;

                    // setup the radio buttons for the products returned
                    setupProductRadioButtons(products);
                },
                "json"
        );
    });

以下是创建我的单选按钮的代码：

    // method used to setup the list of selectable products based on the list returned
    // from the server
    function setupProductRadioButtons(products) {

        // create a radio button for each element in the products array
        jQuery.each(products, function(index) {

            // get the product from the array using the current index
            var product = products[index];

            // create a new radio button using the product name
            createNewRadioButton(
                    '#radioX',
                    product.Id,
                    product.Id,
                    product.Name,
                    index
            );
        });

        // refresh the button set - jQuery UI
        $("#radioX").buttonset("refresh");
    }

    // function used to create a new radio button
    function createNewRadioButton(
            selector,
            newRadioBtnId,
            newRadioBtnName,
            newRadioBtnText,
            newRadioBtnValue){

        // create a new radio button using supplied parameters
        var newRadioBtn = $('<input />').attr({
            type: "radio", id: newRadioBtnId, name: newRadioBtnName, value: newRadioBtnValue
        });

        // create a new label and append the new radio button
        var newLabel = $('<label />').attr('for', newRadioBtnId).text(newRadioBtnText);

        // add the input then the label (and forget about the <br/>
        $(selector)
                .append(newRadioBtn) // add the radio button
                .append(newLabel)    // add the label
                .append("<br>");     // add a line break to separate the buttons
    }

<div id="leftMenu">

<form>
    <div id="radioX">

    </div>
</form>

</div>

以下是HTML减去动态创建的单选按钮：

    // method used to setup the list of selectable products based on the list returned
    // from the server
    function setupProductRadioButtons(products) {

        // create a radio button for each element in the products array
        jQuery.each(products, function(index) {

            // get the product from the array using the current index
            var product = products[index];

            // create a new radio button using the product name
            createNewRadioButton(
                    '#radioX',
                    product.Id,
                    product.Id,
                    product.Name,
                    index
            );
        });

        // refresh the button set - jQuery UI
        $("#radioX").buttonset("refresh");
    }

    // function used to create a new radio button
    function createNewRadioButton(
            selector,
            newRadioBtnId,
            newRadioBtnName,
            newRadioBtnText,
            newRadioBtnValue){

        // create a new radio button using supplied parameters
        var newRadioBtn = $('<input />').attr({
            type: "radio", id: newRadioBtnId, name: newRadioBtnName, value: newRadioBtnValue
        });

        // create a new label and append the new radio button
        var newLabel = $('<label />').attr('for', newRadioBtnId).text(newRadioBtnText);

        // add the input then the label (and forget about the <br/>
        $(selector)
                .append(newRadioBtn) // add the radio button
                .append(newLabel)    // add the label
                .append("<br>");     // add a line break to separate the buttons
    }

<div id="leftMenu">

<form>
    <div id="radioX">

    </div>
</form>

</div>

有什么想法吗？如果我手动设置一个jQuery UI单选按钮的负载，一切都会按照我的预期工作，我选择1个选项，所有其他选项都会被取消选择，我选择一个不同的选项，所有其他选项都会被取消选择，等等。但是，上面的示例允许我选择多个

这是我预期会发生的一个屏幕截图，默认情况下选择了中间选项，然后我选择了当前高亮显示的选项，中间选项自动取消高亮显示：

---

下面是使用我动态创建的单选按钮实际发生的情况的屏幕截图：

能否添加一个JavaScript onclick函数，该函数遍历单选按钮组，然后启用新选择的按钮？我对广泛分布的JSF单选按钮做了类似的操作，因此代码与您的问题并不完全一致，但可能有一些接近的方法可以工作：

function updateRadioButtons(radio) {
    var id = radio.name.substring(radio.name.lastIndexOf(':'));
    var el = radio.form.elements;
    for ( var i = 0; i < el.length; i++) {
        if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
            el[i].checked = false;
        }
    }

    radio.checked = true;
}

---

您需要为属于同一组的单选按钮建立命名约定。与RadioGroup a:button1、RadioGroup a:button2等类似。

您是否可以添加一个JavaScript onclick函数，在单选按钮组中进行迭代，然后启用新选择的按钮？我对广泛分布的JSF单选按钮做了类似的操作，因此代码与您的问题并不完全一致，但可能有一些接近的方法可以工作：

function updateRadioButtons(radio) {
    var id = radio.name.substring(radio.name.lastIndexOf(':'));
    var el = radio.form.elements;
    for ( var i = 0; i < el.length; i++) {
        if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
            el[i].checked = false;
        }
    }

    radio.checked = true;
}

您需要为属于同一组的单选按钮建立命名约定。与RadioGroup A:button1、RadioGroup A:button2等类似。

动态生成的无线电输入的名称属性是Product.Id。但是，如果希望单选按钮相互排斥，则需要为它们指定相同的名称。例如，将方法更改为类似以下内容：

createNewRadioButton(
    '#radioX',
    product.Id,
    product.GroupByName, // ! use one identifier for mutually exclusive radio's
    product.Name,
    index
);

动态生成的无线电输入的名称属性为Product.Id。但是，如果希望单选按钮相互排斥，则需要为它们指定相同的名称。例如，将方法更改为类似以下内容：

createNewRadioButton(
    '#radioX',
    product.Id,
    product.GroupByName, // ! use one identifier for mutually exclusive radio's
    product.Name,
    index
);

---

好的，刚离开办公室，我回家后会整理姓名，然后公布结果-我猜这肯定是问题所在…好的，刚离开办公室，我回家后会整理姓名，然后公布结果-我猜这肯定是问题所在。。。