jquery中checkbox使用方法简单实例演示

和大家分享一段基于jQuery实现checkbox列表全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者。

引入jquery库
<script src="ajax/libs/jquery/1.10.2/jquery.min.js"></script>
构建HTML

一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,实现复选框checkbox的全选与不选,先建立html

<ul id="list">
 <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li>
 <li><label><input type="checkbox" value="2"> 2.哈哈,真的太天真了</label></li>
 <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗?</label></li>
 <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li>
 <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li>
 <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

jQuery 代码

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

$("#all").click(function(){
 if(this.checked){
  $("#list :checkbox").attr("checked", true);
 }else{
  $("#list :checkbox").attr("checked", false);
 }
});

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

$("#selectAll").click(function () {
 $("#list :checkbox,#all").attr("checked", true);
});

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态。

$("#unSelect").click(function () {
 $("#list :checkbox,#all").attr("checked", false);
});

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

$("#reverse").click(function () {
 $("#list :checkbox").each(function () {
  $(this).attr("checked", !$(this).attr("checked"));
 });
 allchk();
});

代码中遍历了选项列表,然后改变checked属性,最后调用函数allchk(),后面将介绍该函数。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

$("#getValue").click(function(){
 var valArr = new Array;
 $("#list :checkbox[checked]").each(function(i){
  valArr[i] = $(this).val();
 });
 var vals = valArr.join(',');//转换为逗号隔开的字符串
 alert(vals);
});

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

//设置全选复选框
$("#list :checkbox").click(function(){
 allchk();
});

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

function allchk(){
 var chknum = $("#list :checkbox").size();//选项总个数
 var chk = 0;
 $("#list :checkbox").each(function () {
  if($(this).attr("checked")==true){
   chk++;
  }
 });
 if(chknum==chk){//全选
  $("#all").attr("checked",true);
 }else{//不全选
  $("#all").attr("checked",false);
 }
}

总结

jQuery操作复选框的选中和不选中状态非常简单,使用attr()来设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。以下我将所有jQuery代码整理在一起,供大家参考。

$(function () {
 //全选或全不选
 $("#all").click(function(){
  if(this.checked){
   $("#list :checkbox").attr("checked", true);
  }else{
   $("#list :checkbox").attr("checked", false);
  }
  });
 //全选
 $("#selectAll").click(function () {
   $("#list :checkbox,#all").attr("checked", true);
 });
 //全不选
 $("#unSelect").click(function () {
   $("#list :checkbox,#all").attr("checked", false);
 });
 //反选
 $("#reverse").click(function () {
   $("#list :checkbox").each(function () {
    $(this).attr("checked", !$(this).attr("checked"));
   });
   allchk();
 }); 

 //设置全选复选框
 $("#list :checkbox").click(function(){
  allchk();
 }); 

 //获取选中选项的值
 $("#getValue").click(function(){
  var valArr = new Array;
  $("#list :checkbox[checked]").each(function(i){
   valArr[i] = $(this).val();
  });
  var vals = valArr.join(',');
   alert(vals);
 });
});
function allchk(){
 var chknum = $("#list :checkbox").size();//选项总个数
 var chk = 0;
 $("#list :checkbox").each(function () {
  if($(this).attr("checked")==true){
   chk++;
  }
 });
 if(chknum==chk){//全选
  $("#all").attr("checked",true);
 }else{//不全选
  $("#all").attr("checked",false);
 }
}

通过本文希望大家对jquery中checkbox的使用方法有个大概的认识,再通过大量实例熟练掌握checkbox使用方法。

时间: 2015-11-22

Jquery 获取checkbox的checked问题

事实证明一切,自己测试了N遍,发现网上的说法和自己以前的理解都是错的,不知道大家有没发现. 下面来看看网上大多资料的说法 复制代码 代码如下: 转别人的一些东西: jquery判断checkbox是否被选中 在html的checkbox里,选中的话会有属性checked="checked". 如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($(#xxx).attr("checked")),会

jQuery判断checkbox是否选中的3种方法

网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法二: 方法一: if ($("#checkbox-id")get(0).checked) {     // do something } 方法二: if($('#checkbox-id').is(':checked')) {     // do something } 方法三: if ($('#checkbox-id').attr('checked')) {     // do something

jQuery操作CheckBox的方法介绍(选中,取消,取值)

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   <HTML>    <HEAD>     <TITLE> New document.nbsp;</TITLE>     <meta http-equiv="Content-Type" content="text/html; charset=U

jquery操作复选框(checkbox)的12个小技巧总结

1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

JQuery对checkbox操作 (循环获取)

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoCheckBox.aspx.cs" Inherits="DemoCheckBox" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery实现全选、反选、获得所有选中的checkbox

举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr

JQuery触发radio或checkbox的change事件

早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

jquery无法设置checkbox选中即没有变成选中状态

复制代码 代码如下: $("input").attr("checked","checked") 设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态 复制代码 代码如下: $("input").prop("checked",true); ttributes和properties之间的差异在特

jquery判断checkbox(复选框)是否被选中的代码

复制代码 代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $("input[name='soft[]']:checkbox").each(function () { if ($(this).attr("checked")) { falg += 1; } }) if (falg > 0) return true; else return fals

jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

jQuery判断checkbox(复选框)是否被选中:if($("#id").attr("checked")==true) jQuery实现checkbox(复选框)选中.全选/反选代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

jquery判断单个复选框是否被选中的代码

<input type="checkbox" id="cr" /><label for="cr">我已经阅读</label> a 用DOM方式来判断是否被选中 复制代码 代码如下: $(function(){ var $cr = $("#cr"); var cr =$cr[0]; $cr.click(function(){ if(cr.checked){ alert("谢谢注册&q

ASP checkbox复选框是否被选中的代码(结合数据库)

有的时候,我们在网页中会用到复选框,也就是多选框,当用户提交输入信息的时候我们会获取复选框的内容,然后保存到数据库中,如经常用到的是用户输入的个人信息.可是当用户提交后可能还需要修改,那么我们就要从数据库中读出这些表单数据,这就要求必须把用户之前输入的状态给显示出来,可是当我们从数据库中读出复选框是否被选中时确很难实现.所以今天就教大家通过ASP从数据库中读出复选框是否被选中的方法,希望还有其他方法的朋友留言分享. 具体代码如下所示: 复制代码 代码如下: <% document=Split(r

js与jQuery实现checkbox复选框全选/全不选的方法

本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

jQuery对checkbox 复选框的全选全不选反选的操作

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

如何判断php复选框是否被选中

复选框checkbox通常用于php表单提交.本文通过实例给大家介绍php如何判断复选框中的值是否被选中.需要它的朋友可以参考本文中的例子. 本文章向大家介绍两个知识点: 1.php表单提交如何获取复选框checkbox的值 2.php如何判断复选框checkbox中的值是否被选中 下面我们分别对这两个知识点进行讲解: 1.php如何获取复选框checkbox的值 首先我们来创建一个表单: <form action ="HandleFormCheckBox.php" method

php checkbox复选框值的获取与checkbox默认值输出方法

php获取 checkbox复选框值的方法 复制代码 代码如下: <html xmlns="http://www.jb51.net/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>php获取 checkbox复选框值的方法</title> &

jquery判断复选框是否被选中的方法

jquery 判断复选框是否选中以及如何选中的问题做一下总结. 进入正题,还是当页面有如下一组复选框的时候: <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type=&q

js点击文本框弹出可选择的checkbox复选框

本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/