Bootstrap开源包中checkbox的全选和反选

html部分代码：

<tr>
<th class="text-center" id="choose"><input type="checkbox" id="checked_all" /></th>

</tr>

  . . .

<tr>

<td class="text-center"><input type="checkbox" class="checked_pro" name="checkbox" /></td>

</tr>

js脚本：

function checkedAction(){
  if($("#checked_all").is(":checked")){
  $(".checked_pro").attr("checked","checked");
  }else{
  $(".checked_pro").removeAttr("checked");
  }
}

发现全选没有任何效果。

在Chrome浏览器控制台上看到的源码却多了一些标签：

<tr>

<td class="text-center">
<div class="checker">

<span class="">

<input type="checkbox" class="checked_pro" name="checkbox" />

</span>

</div>

</td>

</tr>

所以修改js脚本即可：

function checkedAction(){
$("input[type='checkbox']").each(function() {
if($("#checked_all").is(":checked")) {
$(".checked_per_pro").attr("checked","checked");
$(this).parent().addClass("checked");
}else{
$(".checked_per_pro").removeAttr("checked");
$(this).parent().removeClass("checked");
}
});
}