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. DOM表单(复选框)

    在表单中,尤为重要的一个属性是name <!--复选框的全选.全不选.反选--> <!DOCTYPE> <html> <head lang="en& ...

  3. 表单提交复选框(checkbox)注意事项

    例子: <form action="a.php" method="post"> <input type="checkbox" ...

  4. 及时从数据库中取得数据填放进Form表单的多选框中

    #写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...

  5. 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  6. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  7. layui 添加复选框checkbox后,无法正确显示及点击的方法

    layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...

  8. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  9. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

随机推荐

  1. html5可拖动的进度条

    总结:拖动显示进度的进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. Spring课程 Spring入门篇 5-2 配置切面aspect

    本节主要讲了在xml中配置切面的demo 1 解析 1.1 配置切面xml 1.2 配置切面xml 1.3 问:什么是动态代理? 2 代码演练 2.1 配置切面xml 1 解析 1.1 配置切面xml ...

  3. jQuery:mouseover and Increase the Size of an Image

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 从零开始的全栈工程师——PHP篇 ( 单词汇总 ) ( php解决文字乱码 )

    解决乱码: header("Content-Type: text/html;charset=utf-8"); 单词 局部的: local 全局的: global 静态的: stat ...

  5. 【数据库】5.0 MySQL入门学习(五)——MySQL源码了解及MySQL初始化设置

    1.0 MySQL源码目录主要包括:客户端代码.服务端代码.测试工具.其他库文件.当然,看懂源代码得有一定的C语言基础. BUILD:各种平台的编译脚本,可以用来制作各平台的二进制版本 client: ...

  6. CSS深入理解学习笔记之border

    1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...

  7. 【2015 Week Task】

    2015 第17周 task:项目语音识别技术整理 2015 第18周 task:项目key技术整理

  8. GitLab 数据备份和恢复

    GitLab 备份 /opt/gitlab/bin/gitlab-rake gitlab:backup:create //只是备份各项目的数据 完成后会在默认路径下多出来备份的tar包! /var/o ...

  9. CentOS如何部署TinyProxy

    TinyProxy是个非常便利,及容易架设的HTTP代理 安装方法 rpm -Uvh http://dl.fedoraproject.org/pub/epel/5/i386/epel-release- ...

  10. 从命令行运行Jmeter及jmeter参数说明、Html报告生成

    为什么要命令行执行脚本,主要有以下三点: 1) 图形化界面消耗更多资源,CPU和内存 2) 图形化界面不支持大型的负载测试和性能测试 3) 命令行测试支持持续集成,例如放到Jenkins这样的CI工具 ...