`
ssxxjjii
  • 浏览: 938396 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS jQuery分别获取选中的复选框值

 
阅读更多
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <style>  
  5.   
  6. </style>  
  7. <title>JS获取复选框被选中的值</title>  
  8. </head>  
  9. <body>  
  10. <input type="checkbox" name="test" value="0" />0&nbsp;&nbsp;  
  11. <input type="checkbox" name="test" value="1" />1&nbsp;&nbsp;  
  12. <input type="checkbox" name="test" value="2" />2&nbsp;&nbsp;  
  13. <input type="checkbox" name="test" value="3" />3&nbsp;&nbsp;  
  14. <input type="checkbox" name="test" value="4" />4&nbsp;&nbsp;  
  15. <input type="checkbox" name="test" value="5" />5&nbsp;&nbsp;  
  16. <input type="checkbox" name="test" value="6" />6&nbsp;&nbsp;  
  17. <input type="checkbox" name="test" value="7" />7&nbsp;&nbsp;  
  18. <input type="button" onclick="chk()" value="提  交" />  
  19. </body>  
  20. </html>  

 

Js代码  收藏代码
  1. <script src="jquery.js"></script><!--这是载入jquery.js文件,如果不使用jquery可以去掉-->  
  2. <script>  
  3. function chk(){  
  4.   var obj=document.getElementsByName('test');  //选择所有name="'test'"的对象,返回数组  
  5.   //取到对象数组后,我们来循环检测它是不是被选中  
  6.   var s='';  
  7.   for(var i=0; i<obj.length; i++){  
  8.     if(obj[i].checked) s+=obj[i].value+',';  //如果选中,将value添加到变量s中  
  9.   }  
  10.   //那么现在来检测s的值就知道选中的复选框的值了  
  11.   alert(s==''?'你还没有选择任何内容!':s);  
  12. }  
  13.   
  14. function jqchk(){  //jquery获取复选框值  
  15.   var chk_value =[];  
  16.   $('input[name="test"]:checked').each(function(){  
  17.    chk_value.push($(this).val());  
  18.   });  
  19.   alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value);  
  20. }  
  21. </script>  

 

分享到:

相关推荐

    jQuery分别获取选中的复选框值

    首先,让我们关注标题提及的主题——"jQuery分别获取选中的复选框值"。在HTML中,复选框通常用`&lt;input type="checkbox"&gt;`标记创建,而它们的值可以通过`value`属性设定。当用户勾选一个复选框时,jQuery提供了一些...

    jquery实现 复选框 选中和不选中 美化复选框

    本文将详细介绍如何使用jQuery实现复选框的选中与不选中效果的美化。 首先,我们需要理解jQuery的基本用法。jQuery库简化了JavaScript中的DOM操作、事件处理和动画效果。引入jQuery库后,我们可以使用$(document)....

    jQuery单选框和复选框美化代码

    4. **状态管理**:通过jQuery,我们可以轻松地获取或设置单选框和复选框的选中状态,这对于动态更新界面或者验证用户输入非常有用。 5. **响应式设计**:在移动设备上,美化后的单选框和复选框同样重要。jQuery可以...

    jQuery树形复选框插件.zip

    《jQuery树形复选框插件的深度解析与应用》 在Web开发中,为了提供用户友好的交互体验,我们经常需要实现各种各样的UI组件。其中,树形结构的复选框是一种常见且实用的功能,它允许用户以层级方式选择或取消选择一...

    jquery动态复选框取值

    三、获取复选框值 获取复选框的值通常有以下两种方式: 1. `prop()`方法:`prop()`用于获取或设置元素的属性值。对于复选框,我们可以用它来获取`checked`属性,判断复选框是否被选中。 ```javascript // 检查复选...

    jQuery高性能带复选框的树形结构插件

    **jQuery高性能带复选框的树形结构插件——highchecktree** 在Web开发中,树形结构常常用于展示层级关系的数据,例如组织结构、文件系统等。`highchecktree`是一个专门针对这种情况设计的jQuery插件,它能高效地...

    jquery 实现鼠标单击行时,选中checkbox复选框

    jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框

    Jquery复选框的值

    `map()`函数遍历这些复选框,并返回每个选中复选框的`value`属性。最后,`.get()`方法将结果转换为JavaScript数组。 在`index.jsp`文件中,你可以将上述代码添加到`&lt;script&gt;`标签内,或者链接到外部的JavaScript...

    jquery 复选框组件

    jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和用户体验。本篇文章将详细探讨jQuery中的复选框组件,特别是基于jQuery UI的Multiselect插件。 ### jQuery 复选框基础 在HTML中...

    jquery获取checkbox选中的值

    在本场景中,我们关注的是如何使用jQuery来处理HTML中的复选框(checkbox)元素,尤其是获取选中的值、实现全选、取消全选、反选以及选择奇数行的操作。下面将详细介绍这些知识点。 1. **获取选中的值** jQuery ...

    jquery获取复选框checkbox的值实现方法

    //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值 for(var i=0;i&lt;obj.length;i++){ ...

    js 实现选一个复选框 可以实现其他很多复选框同时选中

    通过实现选一个复选框 可以实现其它多个复选框同时选中,并且可以弹出复选框之后的文本框。

    jquery下拉多选复选框插件

    本主题涉及的是一个基于jQuery的下拉多选复选框插件,该插件能够提供用户友好的界面,方便用户在下拉菜单中进行多选操作,尤其适用于后台数据管理或前端交互场景。下面将详细介绍这个插件及其相关的知识点。 1. **...

    jquery实现带复选框的gridview

    这时可以使用jQuery的`.not()`方法来排除已经选中的复选框,确保一次只能有一个被选中。 在实际项目中,数据源通常不会硬编码在HTML中,而是通过Ajax从服务器动态获取。你可以使用jQuery的`$.ajax`或者`$.getJSON`...

    jQuery多级复选框checkbox选中代码

    在本例中,jQuery将用于处理复选框的选中和取消选中状态。基本的复选框选中和取消选中的jQuery代码如下: ```javascript $('input[type="checkbox"]').click(function() { $(this).prop('checked', !$(this).is(':...

    jquery复选框全选操作

    这段代码首先计算当前选中的子复选框数量,如果等于所有子复选框的数量,说明所有都被选中,此时全选复选框应被选中;否则,全选复选框应取消选中。 以上就是使用jQuery实现复选框全选和反选的基本步骤。在实际项目...

    jquery获取复选框checkbox的值的简单实现方法

    下面小编就为大家带来一篇jquery获取复选框checkbox的值的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jQuery单选框跟复选框美化代码.zip

    "jQuery单选框跟复选框美化代码.zip"这个资源提供了一种方法,使得开发者可以优雅地对网页中的单选框(radio buttons)和复选框(checkboxes)进行样式定制,提升用户体验。 首先,我们要理解单选框和复选框在HTML...

    jquery特效制作复选框,全选,反选,取消,购物车,统计价格,统计

    在这个项目中,我们关注的是使用jQuery来实现一些特定的功能,这些功能包括复选框的操作(全选、反选、取消选择)以及购物车中的商品价格统计。 首先,让我们深入了解一下复选框的操作。在HTML中,复选框是通过`...

    jquery无限极复选框下拉树

    **jQuery无限极复选框下拉树**是一种交互式的用户界面元素,常用于在Web应用中展示层次结构的数据,如组织结构、目录树或者复杂的分类系统。这种组件允许用户通过展开和折叠节点来查看和选择多级选项。下面将详细...

Global site tag (gtag.js) - Google Analytics