Form表单之复选框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"选中某复选项;
<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());//遍历选中项的索引
});
<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最后一项的索引
<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");//取消选中某索引对应的项
<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
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进行样式美化,并且带上超酷的滑动 ...
随机推荐
- 05.while循环的练习
练习1: namespace _05.while循环练习01 { class Program { static void Main(string[] args) { //打印100次"努力学 ...
- Bash 脚本语法
每次学了忘,忘了学,怎么记不住,因为长时间不用了 Bash 流程控制 循环 for循环 for item in $list do echo $item done 另一种与C语言类似的写法 ; i< ...
- scss-@extend
@extend指令用于共享规则和选择器之间的关系.它可以扩展所有其他类的样式在一个类中,也可应用于自己特定的样式. 查看如下scss@extend示例: .style{ font-size: 30px ...
- 节点nodeName与nodeValue表
- 中值滤波C语言优化
中值滤波C语言优化 图像平滑是图像预处理的基本操作,本文首先用不同的方法对一张图片做预处理比较它们效果的不同,然后针对中值滤波,实现了一种快速实现.(其实是copy的opencv实现,呵呵).因为op ...
- php *-devel
源码编译安装个php,缺少好多-devel的库. why devel? devel包至少包括头文件和链接库.如果你的要安装的源码依赖某个库,那肯定需要这两样东西. 让apache支持php 在编译ph ...
- CodeMirror教程,CodeMirrorAPI中文信息
<html> <head> <link rel="stylesheet" href="codemirror.css"> ...
- alter table fx.pet modify column `species` varchar(20) binary;
alter table fx.pet modify column `species` varchar(20) binary;
- FlexPaper实现文档在线浏览(附源码)
园子里也有关于FlexPaper的文章,但都不怎么详细. 没有较全的参数说明.就连官方网站都没有.没法,最后只得将swf文件反编译后查看了源码才将里面的参数全部弄出来. 好了,废话不多说,开始正题. ...
- Linux学习笔记之Linux第一课-基本介绍
Linux简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基 ...