jquery 动态选择单选按钮（表单重置问题）答案

【问题标题】：jquery dynamic select radio button (form reset issue)jquery 动态选择单选按钮（表单重置问题）
【发布时间】：2013-08-13 23:43:59
【问题描述】：

我试图使用动态选择单选按钮

$('#dashboard2 #dbMainPanel #bar2 #ddShowBar').attr('checked', true);

但是这个会导致form.reset()失败。因为我在页面中有很多按钮，当我选择时我不使用表单标签

$('#dashboard1 #dbMainPanel #bar1 #ddShowBar').attr('checked', true);

所有其他单选按钮都会重置。

如何避免这种情况？并保持页面中现有的单选按钮处于选中状态，然后动态更改当前单选按钮。

首先在div1中点击pie
然后在div2中点击bar

在这种情况下，我希望选择div1 中的pie 和div2 中的bar

Fiddle

Fiddle2

【问题讨论】：

你能展示你的 HTML 吗？

标签： javascript jquery dynamic radio-button

【解决方案1】：

您尝试过使用.prop() 吗？

$('#ddShowBar').prop('checked', true);

http://api.jquery.com/prop/

属性与属性

属性和属性之间的区别在特定情况下可能很重要。在 jQuery 1.6 之前，.attr() 方法有时会在检索某些属性时考虑属性值，这可能会导致行为不一致。 从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr() 检索属性。 例如，应使用 .prop() 方法检索和设置 selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected。在 jQuery 1.6 之前，可以使用 .attr() 方法检索这些属性，但这不在 attr 的范围内。这些没有对应的属性，只是属性。

还有更多：in your example 您正在为您的广播组生成多个 ID 元素并重复 attr: name。
每个新组都需要一个不同的name，因为它的收音机与前一组中的收音机不同。用犁刀轻松实现c 变量：

在此示例中，第一组中的收音机将具有名称：txtradio0；比下一组收音机：txtradio1 等...

要保持选中的其他行无线电，您只需更改组名称属性：

DEMO

var r = ['Pie','Bar','Line','Area','Scatter'];
var c = 0;  // a group counter // set to 1 if you want

function populateWithRadio(){

    var rB = "<div class='radiobuttons'>";
    for(var i=0; i< r.length; i++){         // create radios
        rB += "<input type='radio' class='ddShow"+ r[i] +"' name='txtradio"+ c +"' value='"+r[i]+"'/>"+ r[i] ;
    }
    rB += "</div></br></br>";

    c++;                         // increase Group counter 
    return rB;                   // returns the generated HTML to append
}


$('#div1').append( populateWithRadio() );
$('#div2').append( populateWithRadio() );

$(document).on("click", '.radiobuttons input', function () {
    alert( 'CLASS: '+ this.className +'\n NAME: '+ this.name );
});

【讨论】：

我使用的是 jQuery 1.8.3
整个页面仍然被重置
@SreekeshOkky 什么是$('#div1 #ddShowPie') 一个或两个 div？你这样做的方式很冗长，在选择 ID 时你只需要一个，而不是两个。否则你需要用逗号分隔它们
让我们continue this discussion in chat

【解决方案2】：

AFAIK，收音机按“名称”HTML 属性分组。因此，您只需为每个无线电组设置唯一的名称，然后只能同时选择组中的一个无线电。否则（如果收音机没有按逻辑分组）你最好使用复选框。

【讨论】：