Form表单之复选框checkbox操作

最新推荐文章于 2024-07-12 17:43:38 发布
最新推荐文章于 2024-07-12 17:43:38 发布
阅读量991 收藏
点赞数

input复选(checkbox)：

  1. <label>input复选1组： </label>
  2. <input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1
  3. <input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2
  4. <input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3

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

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

  1. <label>input复选2组： </label>
  2. <input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1
  3. <input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2
  4. <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值对应的索引和索引对应的值

  1. <label>input复选3组： </label>
  2. <input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1
  3. <input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2
  4. <input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3

checkbox索引对应的值：$("input[name='checkbox3']").eq(2).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选中和取消选中：

  1. <label>input复选4组： </label>
  2. <input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1
  3. <input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2
  4. <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(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");//取消选中某索引对应的项

4.checkbox删除项：

  1. <label>input复选5组： </label>
  2. <input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1
  3. <input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2
  4. <input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3
$("input[name='checkbox5']").eq(1).remove();或者
$("input[name='checkbox5'][value=checkbox复选2]").remove(); 移除复选的项；

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

html内容：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>Form表单复选操作示例1 </title>
  6. <style>
  7. body{ font-size: 14px;}
  8. label{ display:inline-block; width: 8em; margin-left: 0.3em; margin-right: 0.3em;}
  9. input{ margin-top: 0.3em; margin-bottom: 0.3em;}
  10. .tipmsg{ font-size: 14px; color: #f00;}
  11. </style>
  12. </head>
  14. <body>
  15. <form>
  16. <h2>input复选(checkbox)： </h3>
  17. <div>
  18. <label>input复选1组： </label>
  19. <input type="checkbox" name="checkbox1" value="checkbox复选1" checked="checked"/>checkbox复选1
  20. <input type="checkbox" name="checkbox1" value="checkbox复选2"/>checkbox复选2
  21. <input type="checkbox" name="checkbox1" value="checkbox复选3" checked="checked"/>checkbox复选3
  22. <span class="tipmsg">
  23. 相同name的单选项为同一组复选,checked="checked"选中某复选项；
  24. </span>
  25. </div>
  27. <h3>checkbox选中项的值和索引（实际应该叫序号，index()的值从1开始，不是0） </h3> <hr>
  28. <div>
  29. <label>input复选2组： </label>
  30. <input type="checkbox" name="checkbox2" value="checkbox复选1"/>checkbox复选1
  31. <input type="checkbox" name="checkbox2" value="checkbox复选2" checked="checked"/>checkbox复选2
  32. <input type="checkbox" name="checkbox2" value="checkbox复选3" checked="checked"/>checkbox复选3
  33. <span class="tipmsg"> <br>
  34. $("input[name='checkbox2']:checked").val();//只返回选中项的第一个值 <br>
  35. each遍历获取多个选中项的值； <br>
  36. $("input[name='checkbox2']:checked").val();//只返回选中项的第一个序号 <br>
  37. each遍历获取多个选中项的序号； <br>
  38. </span>
  39. </div>
  41. <h3>checkbox值对应的索引和索引对应的值 </h3> <hr>
  42. <div>
  43. <label>input复选3组： </label>
  44. <input type="checkbox" name="checkbox3" value="checkbox复选1"/>checkbox复选1
  45. <input type="checkbox" name="checkbox3" value="checkbox复选2"/>checkbox复选2
  46. <input type="checkbox" name="checkbox3" value="checkbox复选3"/>checkbox复选3
  47. <span class="tipmsg"> <br>
  48. $("input[name='checkbox3']").eq(2).val();//checkbox复选3；eq(索引值)，索引从0开始 <br>
  49. $("input[name='checkbox3'][value=checkbox复选2]").index();//2；index(序号)，序号从1开始 <br>
  50. $("input[name='checkbox3']:first").val();//checkbox第一项的值 <br>
  51. $("input[name='checkbox3']:first").index();//checkbox第一项的索引 <br>
  52. $("input[name='checkbox3']:last").val();//checkbox最后一项的值 <br>
  53. $("input[name='checkbox3']:last").index();//checkbox最后一项的索引
  54. </span>
  55. </div>
  57. <h3>checkbox选中和取消选中 </h3> <hr>
  58. <div>
  59. <label>input复选4组： </label>
  60. <input type="checkbox" name="checkbox4" value="checkbox复选1"/>checkbox复选1
  61. <input type="checkbox" name="checkbox4" value="checkbox复选2"/>checkbox复选2
  62. <input type="checkbox" name="checkbox4" value="checkbox复选3"/>checkbox复选3
  63. <span class="tipmsg"> <br>
  64. $("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项 <br>
  65. $("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项 <br>
  66. $("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项 <br>
  67. $("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项 <br>
  69. $("input[name='checkbox4']").eq(1).prop("checked",true);//选中某索引对应的项 <br>
  70. $("input[name='checkbox4']").eq(1).prop("checked",false);//取消选中某索引对应的项 <br>
  71. $("input[name='checkbox4']").eq(2).prop("checked","checked");//选中某索引对应的项 <br>
  72. $("input[name='checkbox4']").eq(2).removeProp("checked");//取消选中某索引对应的项
  73. </span>
  74. </div>
  76. <h3>checkbox删除项 </h3> <hr>
  77. <div>
  78. <label>input复选5组： </label>
  79. <input type="checkbox" name="checkbox5" value="checkbox复选1"/>checkbox复选1
  80. <input type="checkbox" name="checkbox5" value="checkbox复选2"/>checkbox复选2
  81. <input type="checkbox" name="checkbox5" value="checkbox复选3"/>checkbox复选3
  82. <span class="tipmsg"> <br>
  84. </span>
  85. </div>
  86. </form>
  88. <script src="./jquery-1.x.min.js"> </script>
  89. <script>
  90. $( function(){
  91. var val1 = $( "input[name='checkbox2']:checked").val(); //获取单个复选项的值；如果有多项选中，只返回所有选中项索引最小的值；
  92. //alert(val1);
  94. $( "input[name='checkbox2']:checked").each( function(){
  95. //alert("checkbox2组选中项的值："+$(this).val());//遍历选中项的值
  96. });
  97. var index1 = $( "input[name='checkbox2']:checked").index();
  98. //alert("checkbox2组选中项的项："+index1);
  99. $( "input[name='checkbox2']:checked").each( function(){
  100. //alert("checkbox2组选中项的项："+$(this).index());//遍历选中项的索引
  101. });
  103. var val2 = $( "input[name='checkbox3']").eq( 2).val();
  104. //alert("checkbox3索引2对应的值为："+val2);//checkbox复选3(eq(索引值)索引值从0开始)
  105. var index2 = $( "input[name='checkbox3'][value=checkbox复选2]").index();
  106. //alert("checkbox3值checkbox复选2对应的项为："+index2);
  108. var var3 = $( "input[name='checkbox3']:first").val(); //checkbox第一项的值
  109. //alert(var3);
  110. var index3 = $( "input[name='checkbox3']:first").index(); //checkbox第一项的索引
  111. //alert(var3);
  112. //alert(index3);
  114. var var4 = $( "input[name='checkbox3']:last").val(); //checkbox最后一项的值
  115. //alert(var4);
  116. var index4 = $( "input[name='checkbox3']:last").index(); //checkbox最后一项的索引
  117. //alert(index4);
  119. //$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",true);//选中某值对应的项
  120. //$("input[name='checkbox4'][value='checkbox复选1']").prop("checked",false);//取消选中某值对应的项
  121. //$("input[name='checkbox4'][value='checkbox复选2']").prop("checked","checked");//选中某值对应的项
  122. //$("input[name='checkbox4'][value='checkbox复选2']").removeProp("checked");//取消选中某值对应的项
  124. $( "input[name='checkbox4']").eq( 1).prop( "checked", true); //选中某索引对应的项
  125. $( "input[name='checkbox4']").eq( 1).prop( "checked", false); //取消选中某索引对应的项
  126. $( "input[name='checkbox4']").eq( 2).prop( "checked", "checked"); //选中某索引对应的项
  127. $( "input[name='checkbox4']").eq( 2).removeProp( "checked"); //取消选中某索引对应的项
  129. //$("input[name='checkbox5']").eq(1).remove();
  130. $( "input[name='checkbox5'][value=checkbox复选2]").remove();
  131. });
  132. </script>
  133. </body>
  134. </html>
Angelia6
关注
带复选框的表单提交
oiu1010110的博客
11-01 7387
实现了： 1.选中除开表头的任何项，选中该行复选框。 2.至少选中表中任何一项，表单提交。 html: 带复选框的表单提交 table { border-collapse: collapse; } td,th { width: 40px; height: 100px; border:1px solid #000; } tabl
9款表单复选框（Checkbox)与单选按钮美化
02-17
插件描述：9款表单复选框（Checkbox)与单选按钮美化. 参考示例：http://www.jq22.com/jquery-info5907
前端编程之路一一form表单标签（详解）
最新发布
2401_84418883的博客
07-12 429
select是显示一个下拉列表(drop down list)出来，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在。2、name：为文本框命名，以备后台程序ASP 、PHP使用。当type="text"时，输入框为文本输入框;
用 Javascript 验证表单（form）中多选框（checkbox）值
anjichan4261的博客
05-10 257
和单选框一样，许多新手在用 Javascript 验证表单（form）中多选框（checkbox）的值时，都会遇到问题，原因是 checkbox 和普通的文本框在获取值的时候有很大不同，本文介绍了一个较为通用的获取 checkbox 值的方法，希望对新手有用。 --------------------------------------------------------...
form表单复选框的一键全选（取消）
我要吃木耳的博客
08-04 501
先贴html主要代码 <script type="text/javascript" src="checkbox.js"></script> <form name="form" > <input type="checkbox" name="checkbox" value="全选/取消" onclick="check()">全选/取消<br/> <input type="checkbox" name="box" value="我是老大"&gt
form之checkbox
qq_40245411的博客
03-05 1104
例子 &lt;input type="checkbox" name="uimg" value="图片1"&gt;图片1 &lt;input type="checkbox" name="uimg" value="图片2"&gt;图片2 &lt;input type="checkbox" name="uimg"
laravel-admin：form表单树状复选框组件（CheckboxTree）.rar
03-01
本篇文章将详细讲解如何在 Laravel-Admin 中使用 "CheckboxTree" 组件，这是一个用于实现树状复选框功能的插件，特别适合处理涉及多级分类或权限分配的问题。 首先，我们需要了解 "CheckboxTree" 的基本概念。在 ...
BootStrap表单控件之复选框checkbox和单选择按钮radio
08-30
Bootstrap 表单控件之复选框Checkbox和单选择按钮Radio Bootstrap框架提供了多种表单控件，包括复选框Checkbox和单选择按钮Radio。这些控件可以帮助开发者快速搭建Web应用程序的表单界面。 复选框Checkbox ...
Laravel-admin表单Form多级下拉复选框组件multiCheckbox（优化版）.rar
02-26
表单（Form）是 Laravel-admin 中的核心部分，它支持多种表单元素，包括文本输入、下拉选择、复选框等，以及自定义组件。 `multiCheckbox` 组件是一个专为 Laravel-admin 设计的多级下拉复选框，适用于处理层级结构...
form中相同name的checkbox提交问题
03-21
NULL 博文链接：https://blackbaby.iteye.com/blog/969270
Form-checkbox多选框
hrbsfdxzhq01的博客
01-04 972
&lt;!--单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。 在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。--&gt; &lt;el-checkbox v-model="checked"&gt;备选项&lt;/el-checkbox&gt; data() ...
Form中checkbox的实现
经验分享--我们都在成长
11-30 4240
 效果： 一般这种item的名称为enable_flag 属性 值 subclass information checkbox value when checked Y value when unchecked N initial value N 默认是不选上时，设置che
form表单中包含复选框的提交问题
热门推荐
天蝎座
02-17 8万+
先上代码//index页面代码 下面输入用户名： 下面输入密码： 选择性别： 男 女 李宇春 选择你的从业经历（以下内容请至少选择一项）： //不显示的框 资深程序员 Java嵌入式以及游戏开发 J2EE企业开发 实习 没做过开发
7.20 HTML表单(form)标签、单选、复选
qq_18628331的博客
07-20 772
1. ：标签是成对出现的，以开始，以结束。2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method ： 数据传送的方式（get/post） 用户名:             密码:                       所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信
input表单元素
weixin_48549175的博客
11-08 845
HTML 表单用于收集不同类型的用户输入。是非常常用的标签，需要form元素的配合 <form> . input 元素 . </form> 在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。 常用type属性 属性值 描述 button 定义一个点击按钮（一般用于js） checkbox 定义复选框。 file 定义输入字段和"浏览"按钮，供文件上传。 hidd
在form外部实现添加复选框
幸福有多远
12-18 628
前言：在form外部实现添加复选框，重新渲染表单的效果，有多个表单的时候，也不会相互影响 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, init...
HTML复选框checkbox与表单基础教程
"复选框checkbox是HTML表单中常用的一种元素，用于让用户从多个选项中选择一个或多个。在HTML中，复选框通过`<input>`标签创建，其`type`属性设置为`checkbox`。每个复选框通常会有一个`name`属性来标识该组复选框，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值