jquery 实现checkbox全选/取消全选

jQuery.attr  获取/设置对象的属性值,如:

 代码如下 复制代码

$("input[name='chk_list']").attr("checked");     //读取所有name为'chk_list'对象的状态(是否选中)

$("input[name='chk_list']").attr("checked",true);      //设置所有name为'chk_list'对象的checked为true

再如:

 代码如下 复制代码

$("#img_1").attr("src","test.jpg");    //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src");     //读取ID为img_1的<img>src值

 代码如下 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script>
 $(document).ready(function(){
  //是否选择进行判断
  $(".btn").click(function(){
   if ($("input:checkbox:checked").length == 0)
   {
    alert('你未选择爱好');
   }
  });
  //进行反选
   $(".btn1").click(function(){
   $("input[type=checkbox]").each(function(){
    if ($(this).attr("checked"))
    {
     $(this).attr("checked",false);
    }else{
     $(this).attr("checked",true);
    }
   });
   });
   });
  </script>
 </head>

<body>

 爱好:

 代码如下 复制代码
 <input type="checkbox" name="fav[]" value="read">阅读
 <input type="checkbox" name="fav[]" value="music">音乐
 <input type="checkbox" name="fav[]" value="sport">体育<br />
 <input type="button" name="btn" class="btn" value="提交">
 <input type="button" name="btn1" class="btn1" value="反选">
 </body>
</html>

例2

 代码如下 复制代码

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<input type="checkbox" name="checkbox_name[]” id=”checkbox_name_1″ />1<br /> <input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_2″ />2<br />
<input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_3″ />3<br />
<input type=”checkbox” name=”checkbox_name[]” id=”checkbox_name_4″ />4<br />
<input type=”checkbox” name=”checkedAll” id=”checkedAll”/>全选/取消全选
<script type="text/javascript"><!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
});
} else { // 取消全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
}
});
});
// -->
</script>

时间: 2024-09-16 05:36:51

jquery 实现checkbox全选/取消全选的相关文章

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

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

JQUERY CHECKBOX全选,取消全选,反选方法三_jquery

jquery.checkboxes.zip,然后解压引用到使用插件的页面,这个不用多说了吧!下面看具体例子,为了让大家更好的理解,我直接把实现功能的代码贴出来: 复制代码 代码如下: $("#myform").toggleCheckboxes()//全选,取消全选,反选 $("#myform").toggleCheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform"

checkbox全选/取消全选以及checkbox遍历jQuery实现代码_jquery

复制代码 代码如下: <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" valu

jQuery实现复选框全选/取消全选/反选及获得选择的值

  这篇文章主要介绍了jQuery实现的复选框全选/取消全选/反选及获得选择的值,需要的朋友可以参考下 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(docu

完整的jquery全选/取消全选示例效果

由于这两个比较简单,我就直接上代码吧: //全选/取消全选$('#quanxuan').toggle(function () {     $("input[name='abc']").attr("checked", 'true'); }, function () {     $("input[name='abc']").removeAttr("checked"); }); //反选$('#fanxuan').click(fun

html中的javascript 全选/取消全选操作示例代码

全选/取消全选在批量操作数据时经常会使用到,下文有个不错的示例使用js完成全选/取消全选操作,感兴趣的朋友可以参考下     复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="tex

DataGrid 的 全选/取消全选 控制(CheckBox)

datagrid|控制 DataGrid控件: <Columns>        <asp:TemplateColumn>         <HeaderStyle Width="10px"></HeaderStyle>         <HeaderTemplate>          <INPUT id="CheckAll" name="CheckAll" type="

jQuery实现复选框全选/取消全选/反选及获得选择的值_jquery

复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全选/取消全部 $(&qu

jQuery实现Checkbox中项目开发全选全不选的使用

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习</title> 5 <style type="text/css"> 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 </style> 9 10 <script