javascript-jQuery动态选择单选按钮(表单重置问题)

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

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

但这会导致form.reset()失败.由于页面中有很多按钮,因此选择时不使用表单标签

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

所有其他单选按钮将重置.

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

>在div1中先单击派
>然后在div2中单击栏

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

Fiddle

Fiddle2

解决方法:

您是否尝试过使用.prop()？

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

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

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

还有更多：in your example您正在生成多个ID元素,并为广播组重复了attr：名称.
每个新组的无线电都需要与上一组不同的名称.使用库尔特c变量很容易做到：

在此示例中,第一组中的无线电将具有名称：txtradio0；比下一组电台：txtradio1等…

要维护选中的其他行单选,您只需更改组NAME属性：

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

标签：dynamic,javascript,jquery,radio-button
来源： https://codeday.me/bug/20191030/1968701.html