Form表单之复选框checkbox操作

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>

<head>

<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

相同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

$("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

$("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

$("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>

</div>

</form>

$(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操作的更多相关文章

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

随机推荐

C# string Stream 互转
使用C#将字符串转化成流,将流转换成字符串,代码如下: using System.IO; using System.Text; namespace CSharpConvertString2Stream ...
RestTemplate请求出现401错误
最近遇到一个请求API接口总是报401 Unauthorized错误,起初是认为这个是平台返回的,后来用Postman请求,发现平台其实返回的是一串json,里面带有一些权限验证失败的消息,但到我们代 ...
Spring Cloud Ribbon负载均衡配置类放在Spring boot主类同级增加Exclude过滤后报Field config in com.cloud.web.controller.RibbonConfiguration required a bean of type 'com.netflix.client.config.IClientConfig' that could not b
环境: Spring Cloud:Finchley.M8 Spring Boot:2.0.0.RELEASE 目录结构: 可以看到代码第13行的注释,我已经在@ComponentScan注解中添加了E ...
P2085 最小函数值(minval)
题目描述有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Aix^2+Bix+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个). ...
html相对定位绝对定位
孔子说:“温故而知新,可以为师矣.”这几天参加了一个免费的前端课,每天晚上都有直播,讲解一个独立的案例.在听前端基础的时候,发现自己有不少东西没学会,平时在学校虽说html也写了不少,但有好大一部分都 ...
Easy deployment
Use simple ssh and shell scripts to deploy, upgrade, rollback and reconfigure linux servers. https:/ ...
toMapFromStage layerDefinitions ClassBreakRenderer
class Map 方法 toMapFromStage 用于把屏幕坐标转换为地理坐标 public function toMapFromStage(stageX:Number, stageY:Numb ...
GUID 格式化
1.Guid.NewGuid().ToString("N") 结果为: 38bddf48f43c48588e0d78761eaa1ce6 2.Guid.NewGuid().ToSt ...
hibernate_ID生成策略
increment:主键按数值顺序递增.此方式的实现机制为在当前应用实例中维持一个变量,以保存着当前的最大值,之后每次需要生成主键的时候将此值加1作为主键.这种方式可能产生的问题是:如果当前有多个实例 ...
Flume的load-balance、failover
配置flume集群参考https://www.cnblogs.com/jifengblog/p/9277793.html load-balance负载均衡介绍负载均衡是用于解决一台机器(一个进程) ...

Form表单之复选框checkbox操作

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

随机推荐

热门专题