jquery checkbox全选 获取值

最新推荐文章于 2020-12-01 19:37:58 发布
最新推荐文章于 2020-12-01 19:37:58 发布
阅读量77 收藏
点赞数
原文链接：http://www.cnblogs.com/wxs-zxq/p/6291852.html
版权

<style>
table {

line-height:35px;
}
</style>

<div align="left" style="margin:5%">
<input type="checkbox" id="all">

<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

</div>

<table width="100%" id="list">

<tr>
<td><div align="center"><input type="checkbox" value="1"></div></td>
<td><div align="center">测试1</div></td>
<td><div align="center">测试1</div></td>
<td><div align="center">测试1</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="2" />
</div>
</td>
<td><div align="center">测试2</div></td>
<td><div align="center">测试2</div></td>
<td><div align="center">测试2</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="3" />
</div>
</td>
<td><div align="center">测试3</div></td>
<td><div align="center">测试3</div></td>
<td><div align="center">测试3</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="4" />
</div>
</td>
<td><div align="center">测试4</div></td>
<td><div align="center">测试4</div></td>
<td><div align="center">测试4</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="5" />
</div>
</td>
<td><div align="center">测试5</div></td>
<td><div align="center">测试5</div></td>
<td><div align="center">测试5</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="6" />
</div>
</td>
<td><div align="center">测试6</div></td>
<td><div align="center">测试6</div></td>
<td><div align="center">测试6</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="7" />
</div>
</td>
<td><div align="center">测试7</div></td>
<td><div align="center">测试7</div></td>
<td><div align="center">测试7</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="8" />
</div>
</td>
<td><div align="center">测试8</div></td>
<td><div align="center">测试8</div></td>
<td><div align="center">测试8</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="9" />
</div>
</td>
<td><div align="center">测试9</div></td>
<td><div align="center">测试9</div></td>
<td><div align="center">测试9</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="10" />
</div>
</td>
<td><div align="center">测试10</div></td>
<td><div align="center">测试10</div></td>
<td><div align="center">测试10</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="11" />
</div>
</td>
<td><div align="center">测试11</div></td>
<td><div align="center">测试11</div></td>
<td><div align="center">测试11</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="12" />
</div>
</td>
<td><div align="center">测试12</div></td>
<td><div align="center">测试12</div></td>
<td><div align="center">测试12</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="13" />
</div>
</td>
<td><div align="center">测试13</div></td>
<td><div align="center">测试13</div></td>
<td><div align="center">测试13</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="14" />
</div>
</td>
<td><div align="center">测试14</div></td>
<td><div align="center">测试14</div></td>
<td><div align="center">测试14</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="15" />
</div>
</td>
<td><div align="center">测试15</div></td>
<td><div align="center">测试15</div></td>
<td><div align="center">测试15</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="16" />
</div>
</td>
<td><div align="center">测试16</div></td>
<td><div align="center">测试16</div></td>
<td><div align="center">测试16</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="17" />
</div>
</td>
<td><div align="center">测试17</div></td>
<td><div align="center">测试17</div></td>
<td><div align="center">测试17</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="18" />
</div>
</td>
<td><div align="center">测试18</div></td>
<td><div align="center">测试18</div></td>
<td><div align="center">测试18</div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="checkbox" value="19" />
</div>
</td>
<td><div align="center">测试19</div></td>
<td><div align="center">测试19</div></td>
<td><div align="center">测试19</div></td>
</tr>
</table>
<script>
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").prop("checked", true);
} else {
$("#list :checkbox").prop("checked", false);
}
});
$("#selectAll").click(function () {
$("#list :checkbox,#all").prop("checked", true);
});
$("#unSelect").click(function () {
$("#list :checkbox,#all").prop("checked", false);
});
$("#reverse").click(function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
});
$("#getValue").click(function () {
var vals = "";
$("#list :checkbox").each(function () {
if ($(this).prop("checked") == true) {
vals += $(this).val() + ",";
}
});
alert(vals);
});

$("#list :checkbox").click(function () {
allchk();
});
function allchk() {
var chknum = $("#list :checkbox").size();//选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if ($(this).prop("checked") == true) {
chk++;
}
});
if (chknum == chk) {//全选
$("#all").prop("checked", true);
} else {//不全选
$("#all").prop("checked", false);
}
}
</script>

 

转载于:https://www.cnblogs.com/wxs-zxq/p/6291852.html

weixin_30871293
关注
jquery checkbox全选反选效果代码
12-04
知识点一：使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...
jquery获取checkbox选中的值
热门推荐
xiaopzi的博客
12-16 2万+
jquery获取checkbox选中的值，包括全选 取消全选 反选 选中奇数行 获取选中的值 这里有一个注意点：使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来，所以改成使用prop 下面直接上代码 demo下载 <input type="checkbox" name="xpz" value="1"/>苹果 <input type="checkbox" name="xpz" value="2"/>橘子 <inpu
Jquery 操作 checkbox 方法（全选，取消全选，取值）
Joe_elena的博客
08-15 764
$("#btn1").click(function(){ $("[name='checkbox']").attr("checked",'true');//全选 }) $("#btn2").click(function(){ $("[name='checkbox']").removeAttr(".
jquery取得多选checkbox选中的值
php菜鸟技术天地
05-15 4265
jquery取得多选checkbox选中的值  将所有选中的值保存到数组中 New Document function go() { var str=""; $("input[name='checkbox']:checkbox").each(function(){
jquery 获取所有的 checkbox 值
彻底拆分，一切可控！
07-09 2万+
function getCheckAdIds() { var adIds = ""; $("input:checkbox[name=check_name]:checked'").each(function(i){ if(0==i){ adIds = $(this).val(); }els
jquery获取 checkbox的text值
qq_40833411的博客
04-09 3021
var ids = ""; $('input[name="ckname"]:checked').each(function() { ids += $(this).val() + ','; });//得到选中复选框的value var texts = ""; $('input[name="ck...
jquery checkbox全选、取消全选实现代码
10-29
### jQuery 实现 Checkbox 全选与取消全选 在网页开发中，经常需要用到表单元素中的复选框（checkbox）来收集用户的选择信息。当页面中有多个复选框时，通常还需要提供“全选”和“取消全选”的功能，以便用户能够...
Jquery 实现checkbox全选方法
10-24
### jQuery实现checkbox全选方法知识点 #### 1. jQuery实现全选的基本思路 在Web开发中，checkbox是一种常见的表单元素，用于提供一个可以被选中或取消选中的选项。在实际应用中，有时需要实现全选和全不选的功能...
JQUERY CHECKBOX全选,取消全选,反选方法三
10-30
### JQUERY CHECKBOX全选与取消全选 在JQUERY中实现CHECKBOX的全选和取消全选是前端开发中的基础操作，开发者通过绑定点击事件到一个全选复选框上，以控制其他所有复选框的选中状态。通常，全选操作会使所有复选框...
jQuery获取所有被选中的复选框值，打包成数组
橙-极纪元-cplvfx-JJY.Cheng
05-28 1万+
HTML&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min
jquery获取复选框checkbox的值
技术资料收集站
10-17 3369
jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数。   :checked :匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)   js: //js获取复选框值 var obj = document.getElementsByName("inte
jquery获取checkbox选中的值_jQuery
weixin_39598584的博客
12-01 4791
java0461 .操作页面元素的属性 A重点梳理：1）获得元素对象 var tex=$("#inp1"); 2）获得元素对象的属性 var te=tex.attr("type"); var cl =tex.attr("class"); 3）获得元素固有的属性值 var val =tex.attr("value"); console.log(te+"------"+cl+"-----"+val);...
jQuery的checkbox状态获取与状态设置（赋值）
mdjfk的博客
09-06 2万+
jQuery判断checkbox是否选中： 1、if( $('#checkbox-id').is(':checked') )  2、if ( $('#checkbox-id').attr('checked') )  3、if( $("#checkbox-id").attr("checked") == "true" )  //错误      if( $("#checkbox-id").att...
jquery如何获取checkbox的值
weixin_33725270的博客
04-13 6238
jquery如何获取checkbox的值 一、总结 一句话总结：就是通过jquery获取哪些对应name的checkbox，然后找出:check（被选中的），然后通过jquery的each遍历获取这些的值即可 $('input[name='checkboxName']:checked')+.each遍历取值 二、使用JQuery获取被选中的checkbox的value值 ...
jquery checkbox 多选全选取值
aiqingshan6402的博客
03-17 178
1 <!DOCTYPE HTML> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 5 <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min....
stays mad 反PCL宣传库。Anti PCL pro.zip
10-31
stays mad 反PCL宣传库。Anti PCL pro
伊犁师范大学在四川2020-2024各专业最低录取分数及位次表.pdf
10-31
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
yolo算法-植物数据集-1417张图像带标签adamweeds.zip
最新发布
10-31
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
clickhouse-jdbc驱动jar文件用于建立jdbc链接
10-31
clickhouse-jdbc驱动jar文件用于建立jdbc链接
jquery checkbox 全选
11-18
以下是一个jQuery实现的checkbox全选功能的例子： ```javascript // HTML代码 <input type="checkbox" id="checkAll">全选 <input type="checkbox" class="subCheck">选项1 <input type="checkbox" class="subCheck">选项2 <input type="checkbox" class="subCheck">选项3 // jQuery代码 $(function(){ // 全选 $("#checkAll").click(function(){ $(".subCheck").prop("checked", this.checked); }); // 子选项 $(".subCheck").click(function(){ var flag = true; $(".subCheck").each(function(){ if(!this.checked){ flag = false; } }); $("#checkAll").prop("checked", flag); }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值