jquery动态选择单选按钮(表单重置问题）

jquery dynamic select radio button (form reset issue)

本文关键字：问题 表单 动态 选择 单选按钮 jquery      更新时间：2023-09-26

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

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

但这将导致form.reset()故障。因为我在页面上有很多按钮，当我选择时，我不使用表单标签

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

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

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

  1. 首先单击div1中的pie
  2. 然后单击div2中的bar

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

Fiddle

Fiddle2

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

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

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

属性与属性

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

还有：在您的示例中，您正在生成多个ID元素，并为您的无线电组重复attr:名称
每个新的组需要一个与前一组中的无线电不同的name。使用coulter c变量即可轻松操作：

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

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

演示

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

AFAIK，无线电按'name'HTML属性分组。所以你只需要为每个无线电组设置唯一的名称，然后只能同时选择组中的一个无线电。否则（若无线电并没有按逻辑分组），您最好使用复选框。

相关文章：