Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JQuery 遍历被选中的checkbox元素

JQuery 遍历被选中的checkbox元素

作者头像
泥豆芽儿 MT
发布于 2018-09-11 03:23:41
发布于 2018-09-11 03:23:41
2.3K00
代码可运行
举报
运行总次数:0
代码可运行

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333738

需求

  1. 在一个简单的Html页面中,我需要读取所有被选中的checkbox 元素所在区域的某一元素值(举例下拉框的weight值)的总和
  2. 框架 :ThinkPHP 3.2.3

Ⅰ. html 源代码

  • 如下的代码只是其中的一部分
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
     <li class="li-user-addr" addr_id="{$vo.address_id}">
          <input type="checkbox" class="cb_addr" id="cb_{$vo.address_id}"/>
          <span>tip: I will find you !</span>
          <p>配送重量
              <select name="weight">
                  <option value="5">5</option>
                  <option value="10">10</option>
                  <option value="15">15</option>
              </select>
              kg</p>
          <img src="__MIMG__/dzckjt.jpg"/>
      </li>

Ⅱ. Js 代码编写/实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var allWeight = 0;
//TODO 取出所有被选中的 checkbox 元素
var cb_checked = $('.cb_addr:checked');
var cblen = cb_checked.length;
if (cblen == 0){
    //如果没有选中的元素
    alert('请选择要分配的地址');
}else {
    //TODO 可进行遍历操作
    $.each(cb_checked,function(){
        var id_tag = ($(this).parent().attr("addr_id"));
        allWeight += parseInt($("#sel-"+id_tag).attr("value"));
    });
    alert(allWeight);
}

Ⅲ. 实现效果截图

附录

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年12月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jquery操作select(取值,设置选中)
本文由 小马哥 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
IT小马哥
2023/04/07
4K0
jQuery
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
changxin7
2022/05/06
9.1K0
jQuery
js jquery 基本元素操作
下载:https://github.com/danielm/uploader/archive/master.zip 立即下载
WindWant
2020/09/11
3.5K0
js jquery 基本元素操作
jQuery选择器、元素属性操作--jQuery基础知识点(1)
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
7020
21.jQuery
简介 jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE
zhang_derek
2018/04/11
3.1K0
jQuery基础
一、jQuery是什么? jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“ 二、为什么要用jQuery? 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DO
人生不如戏
2018/04/12
2.1K0
Web阶段:第五章:JQuery库
点击:API文档下载 Jquery介绍 1.什么是JQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。 2.JQue
Java廖志伟
2022/09/28
26.7K0
Web阶段:第五章:JQuery库
jQuery入门基础——选择器
What:jQuery是JavaScript的类库,封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。划重点,这句话要考
用户10196776
2022/11/18
10K0
jQuery入门基础——选择器
javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作。并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可
海仔
2019/08/26
8.2K0
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中) 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var check
程序员同行者
2018/07/02
8.8K0
从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。
Daotin
2018/08/31
2.4K0
从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
jquery 操作 select
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值 jQuery获取Select元素,并设置的 Text和Value: 实例分析: 1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中 3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 jQuery添加/删除Select元素的Option项: 实例分析: 1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个) 4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 三级分类 <select name="thirdLevel" id="thirdLevel" onchange="getFourthLevel()"> <option value="0" id="thirdOption"> 请选择三级分类 </option> </select> </div> 四级分类: <select name="fourthLevelId" id="fourthLevelId"> <option value="0" id="fourthOption"> 请选择四级分类 </option> </select> </div> .if($("#thirdLevel").val()!=0){ $("#thirdLevel option[value!=0]").remove(); } if($("#fourthLevelId").val()!=0){ $("#fourthLevelId option[value!=0]").remove(); }//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!
东营浪人
2019/09/05
1.5K0
京东网页(动态)搭建,利用jquery实现
源代码已分享至本人云盘~~~ 链接:https://pan.baidu.com/s/1Nr5l2Smcmaevs5HHDh5y_A 提取码:blif
时间静止不是简史
2020/07/24
3.5K0
京东网页(动态)搭建,利用jquery实现
jQuery选择器大全(48个代码片段+21幅图演示)
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍,也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () {
牛嗷嗷
2018/03/30
5.1K0
Jquery简介选择的
Jquery一个js相框(程序代码相结合)这是一个程序开发过程中的半成品;分类似该框架EXTJS。
全栈程序员站长
2022/07/06
1.7K0
前端之jQuery
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
GH
2019/12/16
5.1K0
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值
$('input:radi0:checked').val(); $("input[type='radi0']:checked").val(); $("input[name='rd']:checked").val();
用户5640963
2019/07/28
1.4K0
jQuery
jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript 编程。它的宗旨就是:Write less,do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,J
新人小试
2018/04/12
4.8K0
jquery
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
suwanbin
2019/09/26
5.9K0
与Ajax同样重要的jQuery(2)
练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ // 点击button 打印radio checkbox select 中选中项的值 $("#mybutton").click(function(){ // 打印选中性别的值 $("in
Java帮帮
2018/03/19
6.4K0
与Ajax同样重要的jQuery(2)
相关推荐
jquery操作select(取值,设置选中)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验