最简单的checkbox全选功能Jquery代码

记载一段最简单的全选功能Jquery代码。好东西要收藏，故在此留下印记，以供后人考证！

 代码如下 复制代码

$(function(){
 $("#chkAll").click(function(){
  $("input:checkbox").attr("checked",$(this).attr("checked"));
 });
});

例

checkbox全选/反选

 代码如下 复制代码

<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
$("#chk_all").click(function(){
     $("input[name='chk_list']").attr("checked",$(this).attr("checked"));
});
</script>
</body>
</html>

选中的checkbox的value值:

 代码如下 复制代码

<script type="text/javascript">
    //获取到所有name为'chk_list'并选中的checkbox(集合)
    var arrChk=$("input[name='chk_list]:checked");
    //遍历得到每个checkbox的value值
    for (var i=0;i<arrChk.length;i++)
    {
         alert(arrChk[i].value);
    }
</script>
时间： 2024-09-21 11:23:42

最简单的checkbox全选功能Jquery代码的相关文章

基于JS实现checkbox全选功能实例代码_javascript技巧

需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

CHECKBOX全选,取消全选,反选 jquery代码

方法一  $("#myform").togglecheckboxes()//全选,取消全选,反选 $("#myform").togglecheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform").togglecheckboxes(".top5", true)//全选,取消全选且只选前五个,反选 $("#myform").c

jquery数组之存放checkbox全选值示例代码

 使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下 代码如下: <input type="checkbox" id="checkAll" value="1">全选/全部不选  <input type="checkbox" name="items" value="1">1  <input type="ch

jquery checkbox全选反选实现代码

在jquery中我们要判断checkbox是否选中我们可以直接使用 if($("#id").attr("checked")==true) 来操作. 那么如果我们要实现多个checkbox全选反选就可以利用each进行遍历了 jquery代码  代码如下 复制代码 function selectall(){      var arrChk=$("input[name='deleteid']");//checkbox名称        $(arrCh

JQuery简单的checkbox全选、反选例子

HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮.  代码如下 复制代码 <ul id="list">      <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>    <li><label><inpu

Jquery 1.42 checkbox 全选和反选代码_jquery

Jquery代码 复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> function Checked(){ //定义函数checked $(".chk").each(function(){ //遍历html中class为ch

jquery数组之存放checkbox全选值示例代码_jquery

复制代码 代码如下: <input type="checkbox" id="checkAll" value="1">全选/全部不选 <input type="checkbox" name="items" value="1">1 <input type="checkbox" name="items" value=&quo

GridView中加上CheckBox 的全选功能的代码_实用技巧

首先我們當然是要先做出一個有資料的GridViewGridView做好後,我們在後方新增一個樣板欄位(TemplateField)請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox 复制代码 代码如下: <asp:TemplateField>                          <HeaderTemplate>                              <

js 超简单的checkbox全选代码

<!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无标题文档</title