为什么在jquery中为动态创建的复选框定义属性的顺序会影响其值？

我在js文件中有这个代码：

function buildRolePicker() { var pnl = $("[id$='staffRoles']"); $.each(roles["ContactGroupRoles"], function(iteration, item) { pnl.append( $(document.createElement("input")).attr({ id: 'cgr' + item['RoleId'], name: 'cgroles', value: item['RoleId'], title: item['RoleName'], type: 'checkbox' }) ); pnl.append( $(document.createElement('label')).attr({ 'for': 'cgr' + item['RoleId'] }) .text(item['RoleName']) ); }); alert(document.forms[0].cgroles[8].value); } 

我在代码的其他部分浪费了一些时间试图找出调用的原因

 alert(document.forms[0].cgroles[8].value); 

当它应该返回很长时间时返回值“on”。 事实certificate问题是定义属性的顺序。 如果我改变了这个：

  $(document.createElement("input")).attr({ id: 'cgr' + item['RoleId'], name: 'cgroles', value: item['RoleId'], title: item['RoleName'], type: 'checkbox' }) 

对此：

  $(document.createElement("input")).attr({ type: 'checkbox', id: 'cgr' + item['RoleId'], name: 'cgroles', value: item['RoleId'], title: item['RoleName'] }) 

一切正常，我得到了我的长期价值，当我：

 alert(document.forms[0].cgroles[8].value); 

我的问题是为什么？

测试数据：

 var roles = {"ContactGroupRoles":[ {"RoleId":1,"RoleName":"Pending"}, {"RoleId":2,"RoleName":"CEO"}, {"RoleId":3,"RoleName":"Financial Controller"}, {"RoleId":4,"RoleName":"General Manager"}, {"RoleId":5,"RoleName":"Production Manager"}, {"RoleId":6,"RoleName":"Sales Manager"}, {"RoleId":7,"RoleName":"Marketing Manager"}, {"RoleId":8,"RoleName":"Sales Agent"}, {"RoleId":9,"RoleName":"Customer Service"}, {"RoleId":10,"RoleName":"Manager"} ]}; 

Answer 1

似乎无论出于何种原因，IE（至少IE8）和Opera都不会通过更改type保留value属性（尽管Chrome / Firefox会这样做）。 这是一个简化的测试：

 $(document.body).append( $("").attr({ value: 'Test', type: 'checkbox' }) ); alert($("input").val()); alert(document.body.innerHTML); 

你可以在这里试试

IE8 / Opera警报：

• “上”

Chrome / Firefox提醒：

• “测试”

我不确定为什么Opera会以这种方式表现，但无论如何……只是为了更好地展示问题，解决方案当然是首先保持type属性。 也许未来的jQuery版本将首先在循环中处理type ，但如果之前使用任何属性定义，那么这仍然不会带来太多好处。

但是， $("", { value: 'Test', type: 'checkbox' }); 格式遇到同样的问题，IMO 应该修复。