获取、设置input的checked属性：JQuery VS Javascript

2019独角兽企业重金招聘Python工程师标准>>>

jquery中应使用prop方法来获取和设置checked属性，不应该使用attr。原因如下：

1.JQuery：prop方法获取、设置checked属性

<input type="checkbox" name="boy" onclick="CheckThis(this)"/>

function CheckThis(obj){
   if($(obj).prop("checked")){//获取checked属性
      $("input[name='boy']").prop("checked",true);//设置checked属性
   }else{
      $("input[name='boy']").prop("checked",false);//设置checked属性
   }
}

当input的checkbox设置了checked属性时，无论checked=“”或者checked=“checked”，$(obj).prop(“checked”)的结果都是true；当input的checkbox没设置checked属性时，$(obj).prop("checked")的结果都false。

2.JQuery：attr方法获取、设置checked属性

当input初始化未定义checked属性，则不管当前是否选中，$("input[name='boy']").attr("checked")都会返回“undefined”。

当input初始化定义了checked属性，无论checked=“”或者checked=“checked”，当前checkbox都处于选中状态，$("input[name='boy']").attr("checked")都会返回“checked”。

说明：

jquery版本原因：jquery-1.4.1.min.js、jquery-1.4.2.min.js可以用attr方法正确地获取或设置checkbox的checked属性，但是高版本，例如：1.10.2.min.js就不能用attr方法正确地获取或设置checkbox的checked属性。

3.JavaScript：设置checked属性

<input type="checkbox" name="checkCompany" id=“dog”/>京东
<input type="checkbox" name="checkCompany" id=“cat”/>天猫
<input type="checkbox" name="checkCompany" id=“baby”/>淘宝

var selectName = document.getElementsByName('checkCompany');
for(var i = 0;i<selectName.length;i++){
   selectName[i].checked = true;//or false 设置checked属性
}

4.其他实用举例：取所有选中input的value值

var ipt = $('#qxTable').find('input[type="checkbox"]');
var id_string = [];
for (var i = 0; i < ipt.length; i++) {
  if (ipt.eq(i).prop("checked") == true) {
     id_string.push(ipt.eq(i).val());
  }
}

 

转载于:https://my.oschina.net/jingyao/blog/788264