input复选(checkbox)：
<label>input复选1组：</label>

<input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1

<input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3

相同name的单选项为同一组复选,checked="checked"选中某复选项；
1.checkbox选中项的值和索引（实际应该叫序号，index()的值从1开始，不是0）
<label>input复选2组：</label>

<input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2

<input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3

$("input[name='checkbox2']:checked").val();//选中项的第一个值

$("input[name='checkbox2']:checked").each(function(){

  alert("checkbox2组选中项的值："+$(this).val());//遍历选中项的值

});

var index1 = $("input[name='checkbox2']:checked").index();//选中项的第一个序号

alert("checkbox2组选中项的项："+index1);

$("input[name='checkbox2']:checked").each(function(){//遍历选中项的序号

  alert("checkbox2组选中项的项："+$(this).index());//遍历选中项的索引

});
2.checkbox值对应的索引和索引对应的值
<label>input复选3组：</label>

<input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3

checkbox索引对应的值：$("input[name='checkbox3']").eq().val();//checkbox复选3；eq(索引值)，索引从0开始；

checkbox值对应的索引：$("input[name='checkbox3'][value=checkbox复选2]").index();//2；index(序号)，序号从1开始

$("input[name='checkbox3']:first").val();//checkbox第一项的值

$("input[name='checkbox3']:first").index();//checkbox第一项的索引

$("input[name='checkbox3']:last").val();//checkbox最后一项的值

$("input[name='checkbox3']:last").index();//checkbox最后一项的索引
3.checkbox选中和取消选中：
<label>input复选4组：</label>

<input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3

$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项

$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项

$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项

$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项

$("input[name='checkbox4']").eq().prop("checked",true);//选中某索引对应的项

$("input[name='checkbox4']").eq().prop("checked",false);//取消选中某索引对应的项

$("input[name='checkbox4']").eq().prop("checked","checked");//选中某索引对应的项

$("input[name='checkbox4']").eq().removeProp("checked");//取消选中某索引对应的项
4.checkbox删除项：
<label>input复选5组：</label>

<input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1

<input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2

<input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3

$("input[name='checkbox5']").eq().remove();或者

$("input[name='checkbox5'][value=checkbox复选2]").remove(); 移除复选的项；

参考自：http://www.jb51.net/article/77946.htm
html内容：


<!DOCTYPE html>




<html lang="zh-CN">




<head>




  <meta charset="utf-8"/>




  <title>Form表单复选操作示例1</title>




  <style>




    body{font-size:14px;}




    label{display:inline-block;width:8em;margin-left:0.3em;margin-right:0.3em;}




input{margin-top:0.3em;margin-bottom:0.3em;}




.tipmsg{font-size:14px;color:#f00;}




  </style>




</head>




 




<body>




<form>




  <h2>input复选(checkbox)：</h3>




  <div>




    <label>input复选1组：</label>




    <input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1




<input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2




<input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3




<span class="tipmsg">




相同name的单选项为同一组复选,checked="checked"选中某复选项；




</span>




  </div>




  




  <h3>checkbox选中项的值和索引（实际应该叫序号，index()的值从1开始，不是0）</h3><hr>




  <div>




    <label>input复选2组：</label>




    <input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1




<input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2




<input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3




<span class="tipmsg"><br>




$("input[name='checkbox2']:checked").val();//只返回选中项的第一个值<br>




each遍历获取多个选中项的值；<br>




$("input[name='checkbox2']:checked").val();//只返回选中项的第一个序号<br>




each遍历获取多个选中项的序号；<br>




</span>




  </div>




  




  <h3>checkbox值对应的索引和索引对应的值</h3><hr>




  <div>




    <label>input复选3组：</label>




    <input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1




<input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2




<input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3




<span class="tipmsg"><br>




$("input[name='checkbox3']").eq(2).val();//checkbox复选3；eq(索引值)，索引从0开始<br>




$("input[name='checkbox3'][value=checkbox复选2]").index();//2；index(序号)，序号从1开始<br>




$("input[name='checkbox3']:first").val();//checkbox第一项的值<br>




$("input[name='checkbox3']:first").index();//checkbox第一项的索引<br>




$("input[name='checkbox3']:last").val();//checkbox最后一项的值<br>




$("input[name='checkbox3']:last").index();//checkbox最后一项的索引




</span>




  </div>




  




  <h3>checkbox选中和取消选中</h3><hr>




  <div>




    <label>input复选4组：</label>




    <input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1




<input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2




<input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3




<span class="tipmsg"><br>




$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项<br>




$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项<br>




$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项<br>




$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项<br>




 




$("input[name='checkbox4']").eq(1).prop("checked",true);//选中某索引对应的项<br>




$("input[name='checkbox4']").eq(1).prop("checked",false);//取消选中某索引对应的项<br>




$("input[name='checkbox4']").eq(2).prop("checked","checked");//选中某索引对应的项<br>




$("input[name='checkbox4']").eq(2).removeProp("checked");//取消选中某索引对应的项




</span>




  </div>




  




  <h3>checkbox删除项</h3><hr>




  <div>




    <label>input复选5组：</label>




    <input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1




<input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2




<input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3




<span class="tipmsg"><br>




 




</span>




  </div>




</form>




 




<script src="./jquery-1.x.min.js"></script>




<script>




$(function(){




  var val1 = $("input[name='checkbox2']:checked").val();//获取单个复选项的值；如果有多项选中，只返回所有选中项索引最小的值；




  //alert(val1);




  




  $("input[name='checkbox2']:checked").each(function(){




//alert("checkbox2组选中项的值："+$(this).val());//遍历选中项的值




  });




  var index1 = $("input[name='checkbox2']:checked").index();




  //alert("checkbox2组选中项的项："+index1);




  $("input[name='checkbox2']:checked").each(function(){




//alert("checkbox2组选中项的项："+$(this).index());//遍历选中项的索引




  });




  




  var val2 = $("input[name='checkbox3']").eq(2).val();




  //alert("checkbox3索引2对应的值为："+val2);//checkbox复选3(eq(索引值)索引值从0开始)




  var index2 = $("input[name='checkbox3'][value=checkbox复选2]").index();




  //alert("checkbox3值checkbox复选2对应的项为："+index2);




  




  var var3 = $("input[name='checkbox3']:first").val();//checkbox第一项的值




  //alert(var3);




  var index3 = $("input[name='checkbox3']:first").index();//checkbox第一项的索引




  //alert(var3);




  //alert(index3);




  




  var var4 = $("input[name='checkbox3']:last").val();//checkbox最后一项的值




  //alert(var4);




  var index4 = $("input[name='checkbox3']:last").index();//checkbox最后一项的索引




  //alert(index4);




  




  //$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项




  //$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项




  //$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项




  //$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项




  




  $("input[name='checkbox4']").eq(1).prop("checked",true);//选中某索引对应的项




  $("input[name='checkbox4']").eq(1).prop("checked",false);//取消选中某索引对应的项




  $("input[name='checkbox4']").eq(2).prop("checked","checked");//选中某索引对应的项




  $("input[name='checkbox4']").eq(2).removeProp("checked");//取消选中某索引对应的项




  




  //$("input[name='checkbox5']").eq(1).remove();




  $("input[name='checkbox5'][value=checkbox复选2]").remove();




});




</script>




</body>




</html>


 






原文：https://blog.csdn.net/qinshijangshan/article/details/54408004?utm_source=copy 
												


											
Form表单之复选框checkbox操作的更多相关文章
	

    
								
  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    2. 
						
  2. DOM表单（复选框）
		
    在表单中,尤为重要的一个属性是name <!--复选框的全选.全不选.反选--> <!DOCTYPE> <html> <head lang="en& ...
    
		
    3. 
						
  3. 表单提交复选框（checkbox）注意事项
		
    例子: <form action="a.php" method="post"> <input type="checkbox" ...
    
		
    4. 
						
  4. 及时从数据库中取得数据填放进Form表单的多选框中
		
    #写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...
    
		
    5. 
						
  5. 关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）
		
    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
    
		
    6. 
						
  6. php 判断复选框checkbox是否被选中
		
    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...
    
		
    7. 
						
  7. layui 添加复选框checkbox后，无法正确显示及点击的方法
		
    layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...
    
		
    8. 
						
  8. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
		
    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
    
		
    9. 
						
  9. 使用CSS3美化复选框checkbox
		
    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 微软的深度学习框架cntk ，我目前见过 安装方式最简单的一个框架，2.0之后开始支持C# 咯
			
    wiki:https://github.com/Microsoft/CNTK/wiki 嗨,你也是我这种手残党么?之前试着安装着mxnet和tensorflow,但是因为时间比较短所以往往来不及安装完 ...
    
			
    2. 
						
  2. Html-知识总结
			
    1.Html概述 1.1什么是Html Html:超文本标记语言(hyperText Markup Language) “超文本”加上指页面内可以包含图片,链接等非文字内容. “标记”就是使用标签的方 ...
    
			
    3. 
						
  3. Java ConcurrentHashMap初始化
			
    初始化ConcurrentHashMap时可以指定map大小,由于ConcurrentHashMap代码默认大小是2n,这里需要把用户填的大小转换成2n备注:代码基于jdk 1.8.0_91Concu ...
    
			
    4. 
						
  4. GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean
			
    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...
    
			
    5. 
						
  5. swagger快速开发
			
    转载:https://blog.csdn.net/xxoo00xx00/article/details/77163399 swagger 学习笔记 搭建环境: 1,jdk1.8 2,idea 3,sp ...
    
			
    6. 
						
  6. 前端（三大框架、Bootstrap，jQuery，自整理）
			
    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
    
			
    7. 
						
  7. 【HTML&CSS】文本的基本处理
			
    其实在写这篇博客的时候已经学了很久,也写了不少代码,特别是很枯燥的看完整个html部分,因为不带有CSS写出来的东西干巴巴的一点也不好看. 直到展开CSS学习才开来补上博客,嗯,这是个好习惯. 这是运 ...
    
			
    8. 
						
  8. Android之侧滑导航栏
			
    今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千.当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强 ...
    
			
    9. 
						
  9. window.frames在不同浏览器中的用法
			
    document.frames 等同于 window.frames,用来取得当前页面内 window 对象的集合. 不支持Firefox,其他浏览器(chrome.opera.IE.360)均支持.  ...
    
			
    10. 
						
  10. 使用CKRule规则引擎处理多变业务
			
    1, 多变业务 开发系统时,有没有试过下面的情况,如果你试过,那可以考虑一下使用规则引擎了. 序号 问题 举例 1 业务规则来自于一个或多个表格 商店的会员积分表,停车场的计费标准,快递费的计算表,客 ...
    
			
    11.