JQuery练习——操作Checkbox例子

最新推荐文章于 2019-12-13 11:07:28 发布
最新推荐文章于 2019-12-13 11:07:28 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： jquery input function button xhtml image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingYun1029/article/details/6292558
版权

 

<script type="text/javascript" src="jquery-1.3.2.min.js" mce_src="jquery-1.3.2.min.js"></script>
/*
讲解：
$(":input")选取所有的<input>、<textarea>、<select>、<button>元素。和$("input")不一样，$("input")不一样只获得<input>
$(":text")选取所有单行文本框，等价于$("input[type=text]")
$(":password")选取所有的密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
*/
<script type="text/javascript">
	$(function(){			
		$("input[name=names]").click(function(){//选中name属性为names的inupt标签(或者$("input:checkbox"))，并为之注册click事件
			var arr = new Array();
			$("input[name=names]:checked")//获取name属性为names，并且被选中的input标签
				.each(function(key,value){//循环操作
				arr[key] = $(value).val();//
			});
			$("#disp").text("共选中"+arr.length+"项："+arr.join(","));
		});
	});
</script>


qingYun1029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS/JQuery-第3章上机练习.zip
04-20
【原创作者田超凡，未经许可请勿转发，侵权仿冒必究】 JS/JQuery-第1章上机练习.zip
JS/JQuery-第5章上机练习.zip
04-20
【原创作者田超凡，未经许可请勿转发，侵权仿冒必究】
html input checkbox - js,jQuery
weixin_33766168的博客
04-20 79
&lt;ul class="ul_inline" &gt;　　&lt;li&gt;&lt;input type="checkbox" name="checkbox_color" value="白" /&gt;白&lt;/li&gt;　　&lt;li&gt;&lt;input type="checkbox" name=&
JS/JQuery-第6章上机练习.zip
04-20
【原创作者田超凡，未经许可请勿转发，侵权仿冒必究】 JS/JQuery-第1章上机练习.zip
jQuery选择器上机练习题及答案.rar
12-02
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）查找id号为tigerLily的元素 （2）查找拥有类myList的元素 （3）查找所有的input元素 （4）查找所有img元素和tr元素 （5）查找id号为coffeePot和id号为someDiv的元素 （6）选择具有id属性的所有元素 （7）选择具有id属性的input元素 （8）选择其value属性等于A的元素 （9）选择其value属性等于A或等于C的元素 （10）选择其title属性值中含有dog的img元素 （11）选择其href属性值以http开头的a元素 （12）选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （13）选择元素li，该元素作为拥有myList类的ul元素的直接子元素 （14）选择id号为radioA的input元素后面的第一个input兄弟元素 （15）选择id号为radioA的input元素后面的所有input兄弟元素 （16）选择dom sample页面中第3个tr元素 （17）选择其type属性值checkbox且索引为偶数的input元素 （18）选择非最后一行的tr元素 （19）选择所有的checkbox元素 （20）选择所有被选中的表单元素 （21）选择含有1972的td元素 （22）选择包含有sapn元素的div元素 （23）选择表格中每行的第一个单元格和最后一个单元格 （24）选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面，该页面中内嵌有几个CSS类：.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）将拥有alt属性的倒数第二个图片元素应用yellow类 （2）将第一个checkbox表单元素应用.green样式 （3）求id值为checkbox3的元素在所有表单元素里的顺序号 （4）用一条链式语句完成：先对所有img元素应用seeThrough样式，再为所有img元素和tr元素应用yellow样式 （5）用filter方法实现：选择单元格内容为Java或Smalltalk的单元格 （6）取图片集中的第2,3,4张图片 （7）用has方法实现:选择那些包含有ul元素的li元素 （8）将tbody每个单元格里的文字设为：我爱jQuery （9）查找form元素的后代元素中标签为label的元素 （10）查找表单元素中是否有id值为checkbox5的元素 提示： 为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
jquery checkbox 选中 取消 checkbox多选
10-27
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框（checkbox）的选中和取消选中功能，以及如何处理多选的情况。 ...
jquery、js操作checkbox全选反选
12-08
在许多场景下，我们可能需要处理复选框（checkbox）的选择状态，例如实现全选和反选的功能。这里我们将详细讲解如何使用 jQuery 和 JavaScript 实现这一目标。 首先，我们来看全选功能的实现。在给定的代码中，有一...
jquery checkbox的相关操作总结
10-21
主要介绍了jquery checkbox的相关操作总结的相关资料,需要的朋友可以参考下
JQuery对checkbox操作 （循环获取）
10-28
在本示例中，我们关注的是 jQuery 对 checkbox 的操作，特别是如何进行全选、反选、取消全选以及按特定条件选择 checkbox。下面将详细解析这些功能的实现方式： 1. **全选**： 当用户点击“全选”按钮（id="btn1...
jQuery练习
03-20
1：导航菜单弹出二级菜单 博文链接：https://justsee.iteye.com/blog/798405
北大青鸟jQuery第二章上机练习加课后
03-05
北大青鸟jQuery第二章上机练习加课后作业
jquery练习实例
10-16
里面有几个jquery的实例，还有一部分方法
JQuery（20）_JQuery 样式操作练习
魏宇轩
12-13 373
本系列博客汇总在这里：JQuery 汇总 JQuery 样式操作练习一、题目要求二、代码实现 一、题目要求 二、代码实现 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/j...
几个简单的jquery知识点练习
qizhichao110的专栏
01-21 2484
三、jquery对象和dom对象             //页面的基本元素加载后         $(function () {             var btnObjDom = document.getElementById('btn');             //dom对象变成jquery对象             alert($(btnObjDom).val
JQuery——相关练习
爱是与世界平行
07-25 661
JQuery的基本语法<!--导入JQuery文件--> <script src="js/jquery-3.1.1.min.js"> /*带min的是压缩后的JQuery*/ </script><!--JQuery文档就绪函数 文档就绪函数：为了防止文档在完全加载（就绪）之前运行JQuery $(document).ready(function(){ ---jQuery functions
jQuery节点操作练习
全干工程师
03-15 1898
练习1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <titl
JQuery（11）_JQuery 中的 DOM 操作练习
魏宇轩
12-13 651
本系列博客汇总在这里：JQuery 汇总 JQuery 中的 DOM 操作练习一、题目要求二、实现代码三、实现效果 一、题目要求 二、实现代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.s...
jQuery第5章上机练习3(使用jQuery变换网页效果)
热门推荐
拂欢
06-10 1万+
ps:在此之前,讲明两个注意点: 上机练习3的参考解决方案里,同样使用next()来获取下一个元素,但是我做的就是不成功,当然,我和书本上的参考代码有所出入.代码中,当点击"你是我人间是四月天"文字a标签时,设置$("#a").click(function{ (this).css(&quot;color&quot;:&quot;blue&quot;),&...
jQuery常用案例练习
南北极之间
07-02 1221
jQuery操作css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="../../js/tool/jquery-1.12.4.js">&...
jquery获取选中的checkbox
最新发布
06-28
### 回答1： 可以使用以下代码来获取选中的checkbox： ``` var checkedValues = []; $('input[type="checkbox"]:checked').each(function() { checkedValues.push($(this).val()); }); ``` 这段代码会遍历所有选中的checkbox，将它们的值存储在一个数组中。你可以根据需要修改这段代码来适应你的具体情况。 ### 回答2： 在jQuery中获取选中的checkbox可以使用两种方法：prop()和is()。下面将分别介绍这两种方法： 1. 使用prop()方法获取选中的checkbox prop()方法是用于获取或设置元素的属性值。对于checkbox元素，可以使用prop()方法获取或设置checked属性的值，该属性的值为true或false。因此，可以通过判断该属性的值来确定是否选中了checkbox。 示例代码如下： ``` // 获取选中的checkbox的值 var checkedValues = []; $('input[type="checkbox"]:checked').each(function() { checkedValues.push($(this).val()); }); console.log('选中的值为：' + checkedValues.join(',')); ``` 解释： - 首先使用选择器选中所有类型为checkbox且被选中的元素。 - 使用each()方法遍历选中的元素，并将它们的值添加到一个数组中。 - 最后将数组中的值用逗号分隔后输出到控制台。 2. 使用is()方法获取选中的checkbox is()方法是用于判断元素是否符合某个选择器或是否具有某个属性的值。对于checkbox元素，可以使用is()方法判断其是否被选中，判断结果为true或false。因此，也可以通过判断该方法的返回值来确定是否选中了checkbox。 示例代码如下： ``` // 判断是否选中了checkbox $('input[type="checkbox"]').each(function() { if ($(this).is(':checked')) { console.log($(this).val() + '被选中了'); } else { console.log($(this).val() + '未被选中'); } }); ``` 解释： - 首先使用选择器选中所有类型为checkbox的元素。 - 使用each()方法遍历所有元素，对于每个元素使用is()方法判断其是否被选中。 - 根据判断结果输出不同的信息到控制台。 以上两种方法都可以用于获取选中的checkbox的值，具体使用哪种方法可以根据实际需求来选择。 ### 回答3： 在使用 jQuery 获取选中的 checkbox 值时，首先需要了解以下几个 jQuery 的方法: 1. `:checked` 选择器，用于选择被选中的元素。 2. `each()` 方法，用于遍历选中的元素。 3. `val()` 方法，用于获取元素的值。 下面是一个基本的获取选中 checkbox 值的代码示例： ```javascript // 获取所有选中的 checkbox 值 var checkedValues = []; $('input[type=checkbox]:checked').each(function() { checkedValues.push($(this).val()); }); // 输出选中的值 console.log(checkedValues); ``` 解释一下这段代码： 首先，我们使用选择器 `$(':checkbox:checked')` 来选择所有被选中的 checkbox 元素，并使用 `each()` 遍历每个被选中的元素。在 `each()` 方法中，当前被遍历的 checkbox 元素被传递到一个匿名函数中。我们使用 `$(this).val()` 方法获取当前 checkbox 的值，并将其推送到一个名为 `checkedValues` 的数组中。 最后，我们将 `checkedValues` 数组输出到控制台。 当然，如果只有一个选中的 checkbox，我们也可以直接使用 `val()` 方法获取它的值，如下所示： ```javascript var checkedValue = $('input[type=checkbox]:checked').val(); console.log(checkedValue); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值