附上最少代码的全选

来源：互联网发布：淘宝设置运费模板技巧编辑：程序博客网时间：2024/06/08 06:16

html全选功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><script src="jquery-1.7.1.min.js"></script><script> $(function(){ //全选$("[name='id_allYes']").on("click",function(){$("[name='cls']").attr("checked",this.checked);   }); $("[name=cls]").on("click",function(){var s = $("[name=cls]").size(); var i = $("[name=cls]:checked").size();  if(s==i){$("[name='id_allYes']").attr("checked",true);   }else{$("[name='id_allYes']").attr("checked",false);   }})})</script><body><p>  <input type="checkbox"  id="id_allYes"> <label for="id_allYes" >全选</label></input></p><p>   <input type="checkbox" name="cls" value="1"  class="ml_20 fl"/></p><p>  <input type="checkbox" name="cls" value="1"  class="ml_20 fl"/></p><p>  <input type="checkbox" name="cls" value="1"  class="ml_20 fl"/></p></body></html>

不要忘记把 jquery-1.7.1.min.js 文件导入进来。

小知识：

checkbox 点击旁边的字体勾选复选框

<input type="checkbox" id="id_allYes"> <label >全选</label></input>

这个时候点击全选这个字时无效。

当加上这个属性 for=" 这里是 checkbox ID的名称"

id的属性等于 for属性的值时点击旁边的文字就会有效果了。

当加上这个属性 for=" 这里是 checkbox ID的名称"

<input type="checkbox" id="id_allYes"> <label for="id_allYes" >全选</label></input>

这两个要一致才有效。

0 0

附上最少代码的全选

html全选功能

checkbox 点击旁边的 字体勾选复选框

<input type="checkbox" id="id_allYes"> <label >全选</label></input>

<input type="checkbox" id="id_allYes"> <label for="id_allYes" >全选</label></input>

checkbox 点击旁边的字体勾选复选框