`

jQuery之checkbox(复选框)

阅读更多
业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项
页面代码
<input type="checkbox" name="love" value="0"/>电影
<input type="checkbox" name="love" value="1"/>图书
<input type="checkbox" name="love" value="2" checked/>学习
 <input type="checkbox" name="love" value="3"/>编程
 <input type="button" id="get4" value="设置多选框的值" /><br> 

jQuery中它提供了一个方法实现
$(":checkbox[name=love]").slice(1,2).attr("checked",true);

但是这个方法有局限性,它只是选取二个下标之间的元素
只有手动写了
var v = prompt('欢迎你,请输入值','');
var lv = v.split(',');
 var size = lv.length;			          
 $(':checkbox[name=love]').each(function()   
 { 
	 this.checked = false;
	  /*
	for(var i=0;i<size;i++){
		if(this.value == lv[i]){
			this.checked = true;
		}
	}*/    
	if(v.indexOf(this.value) != -1){
		this.checked = true;
	}
 });  

js原生实现
//js原生实现				
 //判断是以逗号相连			       
  var lv = v.split(',');
 var size = lv.length;
 var loves = document.getElementsByName("love");
 var leng = loves.length;
 for(var i=0;i<leng;i++){
	 //将原来设置清空
	 loves[i].checked = false;			          	  
	if(size > 0){
		 for(var j=0;j<size;j++){
		      if(loves[i].value == lv[j]){
			      loves[i].checked = true;
			          break;
			}
	          }
	}else{
		 if(loves[i].value == v){
			 loves[i].checked = true;			          	  	 		
		 }
	  } 
  }

说明以下来自于:jQuery权威指南代码:针对单个复选框的判断
<input type="checkbox" id="cr"/>

jQuery方式
 var $cr = $("#cr");  //jQuery对象
 $cr.click(function(){
	if($cr.is(":checked")){ //jQuery方式判断
		 alert("感谢你的支持!你可以继续操作!");
	  }
 })

DOM方式
var $cr = $("#cr");  //jQuery对象
var cr = $cr.get(0); //DOM对象,获取 $cr[0]
 $cr.click(function(){
	  if(cr.checked){ //DOM方式判断
		 alert("感谢你的支持!你可以继续操作!");
	  }
 })
分享到:
评论

相关推荐

    基于jQuery的CheckBox复选框代码,效果很酷哦

    本教程将详细讲解如何利用jQuery实现一个炫酷的CheckBox复选框效果。 首先,让我们理解复选框(CheckBox)的基本概念。在HTML中,`&lt;input type="checkbox"&gt;`用于创建一个复选框,用户可以勾选或取消勾选。然而,...

    jquery 实现鼠标单击行时,选中checkbox复选框

    jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框

    jQuery树形复选框插件.zip

    这些元素通常以`&lt;ul&gt;`和`&lt;li&gt;`构成,每个`&lt;li&gt;`代表一个节点,其中包含了复选框`&lt;input type="checkbox"&gt;`和节点文本。插件通过这些元素进行渲染和交互处理。 `css`文件夹包含了样式文件,用于定义树形复选框的视觉...

    Prototype与jQuery美化Checkbox复选框实例.zip

    "Prototype与jQuery美化Checkbox复选框实例"这个压缩包文件正是针对这一需求提供的一种解决方案。下面,我们将详细探讨Prototype和jQuery库在美化Checkbox上的应用以及相关的前端知识点。 首先,Prototype是一个...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...

    jquery 复选框组件

    **jQuery 复选框组件详解** 在Web开发中,复选框(Checkbox)是一种常见的用户交互元素,用于让用户从多个选项中选择一个或多个。jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和...

    隐藏layui数据表格表头的checkbox复选框

    ### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中,经常会使用到LayUI框架搭建网页应用,尤其是在设计复杂的数据展示界面时,LayUI提供了强大的数据表格功能。然而,在某些场景...

    jQuery美化版复选框checkbox,自定义形状和颜色

    对于jQuery自定义复选框checkbox和单选框Radiobox,我们已经有介绍过不少了,比如9款迷人样式的CSS3自定义Checkbox复选框和HTML5/CSS3开关按钮 立体3D按钮。今天要介绍的是一款基于jQuery的美化版复选框,它的特点是...

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...

    jQuery自定义美化复选框checkbox样式

    本项目专注于使用jQuery来美化复选框(checkbox)的样式,为用户提供更加美观和定制化的界面体验。 首先,复选框是HTML中一种基本的表单元素,通常用于让用户在多个选项中进行多选。然而,浏览器默认的复选框样式...

    CheckBox复选框美化版

    "CheckBox复选框美化版"就是这样一个专注于提升UI美感的项目。复选框(CheckBox)是用户界面中常见的一种元素,用于让用户在多个选项中进行多选操作。在标准的HTML和CSS中,复选框的样式有限,往往难以满足设计师们...

    jQuery如何判断checkbox(复选框)是否被选中

    在探讨如何使用jQuery判断复选框(checkbox)是否被选中的过程中,我们首先需要理解复选框的基本属性以及jQuery操作DOM元素的方式。复选框在HTML中被定义为`&lt;input type="checkbox"&gt;`,当它被选中时,其`checked`属性...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    jquery点击checkbox复选框仿招聘人才网弹出工作地点

    本示例探讨的是如何使用jQuery实现一个功能,即当用户点击复选框(checkbox)时,模仿招聘人才网站的工作地点弹出选择功能。这个功能可以提升用户体验,让用户更加便捷地筛选感兴趣的工作岗位。 首先,我们需要理解...

    jquery实现 复选框 选中和不选中 美化复选框

    在网页设计中,复选框(Checkbox)是用户界面中常用的一种元素,它允许用户对多个选项进行选择或取消选择。然而,原生的HTML复选框在样式上可能较为简单,无法满足现代网页设计美观的需求。jQuery作为一个强大的...

    实现table表格checkbox复选框的全选 反选

    在网页开发中,表格(Table)是常用的数据展示方式,而复选框(Checkbox)则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能,能够大大提升用户体验,使用户可以便捷地选择一组数据。这里我们将详细...

    jquery特效制作复选框,全选,反选,取消,购物车,统计价格,统计

    在这个项目中,我们关注的是使用jQuery来实现一些特定的功能,这些功能包括复选框的操作(全选、反选、取消选择)以及购物车中的商品价格统计。 首先,让我们深入了解一下复选框的操作。在HTML中,复选框是通过`...

    jQuery多级复选框checkbox选中代码

    本教程主要探讨的是如何使用jQuery实现多级复选框(checkbox)的功能,包括水平横向、垂直纵向两种排列方式,并且提供了三种不同的样式供选择。通过这个项目,我们可以学习到如何用jQuery控制复选框的状态,以及如何...

    jQuery弹出框checkbox复选框多选代码.zip

    在给定的压缩包"jQuery弹出框checkbox复选框多选代码.zip"中,我们可以看到两个核心文件:`index.html`和`jquery-1.9.1.min.js`。这些文件共同构成了一个简单的jQuery应用,用于实现弹出框内的多选复选框功能。 ...

Global site tag (gtag.js) - Google Analytics