使用JQuery获取被选中的checkbox的value值

最新推荐文章于 2023-12-06 17:28:05 发布
最新推荐文章于 2023-12-06 17:28:05 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Tohold/p/8806615.html
版权

上网查了一下，感觉一些人回答得真的是不知所云，要么代码不够简便。或者是有些想装逼成分等。

以下为使用JQuery获取input checkbox被选中的值代码:

<html>
    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>

    <body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">


    </body>
    
    <script>
        //方法1
        $("#b1").click(function(){
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("你选了："+
                    $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
            });
        });
        
        //方法2
        $("#b2").click(function(){
            $.each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了："+
                        $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
                }
            });
        });
    </script>
</html>

转载于:https://www.cnblogs.com/Tohold/p/8806615.html

dgim65004
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery遍历checkbox获取选中项value值的方法
10-26
主要介绍了Jquery遍历checkbox获取选中项的value值,需要的朋友可以参考下
jQuery获取checkboxlist的value值的方法
12-28
至于为什么不显示value值，我也不清楚，本篇给出一个用jQuery获取checkboxlist值的方法。 先看看原始的页面html代码： <input type=button id=btnShow value=显示选中值 /> 下面我们绑定check
使用JQuery获取被选中的checkbox的value值 以及全选、反选
weixin_34067049的博客
03-26 139
以下为使用JQuery获取input checkbox被选中的值代码: &lt;html&gt; &lt;head&gt; &lt;meta charset="gbk"&gt; &lt;!-- 引入JQuery --&gt; &lt;script src="jquery-1.3.1.js" type="text/javascri
jquery获取复选框的值
lvdong5830的专栏
04-13 128
jquery获取复选框的值 分类： jquery2011-01-11 01:53 3783人阅读 评论(1) 收藏 举报   [xhtml] view plaincopy  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/T...
jQuery获取checkbox选中的值
11-23
首先，让我们来看标题和描述中提到的问题：在网页上有多个checkbox，用户可以选择其中的一个或多个，然后我们需要获取被选中的checkbox的值。这在很多场景下都很常见，例如表单提交或者数据筛选。 在提供的代码示例...
jquery checkbox 选中 取消 checkbox多选
10-27
本文将深入探讨如何使用jQuery来实现复选框（checkbox）的选中和取消选中功能，以及如何处理多选的情况。 首先，我们需要理解HTML中的`<input>`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...
jQuery获取CheckBox选择的Value值
scheme2008的专栏
10-13 174
$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 如果你想得到 Value值你需要遍历这个集合 $($("input[name='checkbox_name'][checked]")). each(function(){arrChk+=this.value + ',';});//遍历被选中CheckBox元素的集合...
jQuery获取Radio,CheckBox选择的Value值(示例代码)
01-21
$(“input[name=’radio_name’][checked]”).val(); //选择被选中Radio的Value值$(“#text_id”).focus(function(){//code…}); //事件 当对象text_id获取焦点时触发$(“#text_id”).blur(function(){//code…}); //事件 当对象text_id失去焦点时触发$(“#text_id”).select(); //使文本框的Vlaue值成选中状态$(“input[name=’radio_name’][value=’要选中Radio的Value值'”).attr(“checke
jquery获取复选框中的值
weixin_40259093的博客
12-02 731
输入框： 城市：北京 上海 &amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;button id=&amp;amp;quot;bt1&amp;amp;quot;&amp;amp;amp;gt;按钮&amp;amp;amp;lt;/button&amp;amp;amp;gt; &amp;amp;amp;lt;/div&amp;amp;a
jQuery和JS获取选中复选框的值
HaleyTiger的博客
07-02 1354
一、获取两个不同name属性的checkbox（有限枚举） < input id="name_checkbox" style="margin-left: 5%; zoom: 150%;" name="nameBox" type="checkbox" value="1" /> < input id="code_checkbox" style="margin-left: 5%; zo...
JQ对复选框全选、获取复选框的值、回选
C2974819879的博客
08-20 2123
JQ对复选框全选、回选、获取复选框的值
layui数据表格中的数据获取以及实现复选框的勾选
最新发布
qq_63578903的博客
12-06 1255
注意：在遍历获取表格数据（如，项目名称 projectName）时，注意在浏览器中检查元素的结构，layui喜欢隐藏一些内容，我也检查了好久才发现实际的值在td标签中还有一个div标签（这才是真正的值所在）所以在找到值的时候后面得跟一个空格div( div)就好了；还有要找对位置（从大往小找）先展示效果（说明：该效果是通过一个后端发来的一个id去找到对应的表格的行，同时获取表格的项目名称：LLL，将其显示在父页面上；并且实现将id对应的表格的行的复选框进行勾选中）话不多说上代码：（只展示核心部分）
jquery 获取checkbox 获取选中的
06-28
### 回答1： jquery 获取 checkbox 元素的选中状态，可以使用以下代码： ``` // 选中所有名为 "myCheckBox" 的 checkbox 元素 var myCheckBoxes = $('input[name="myCheckBox"]:checked'); // 遍历所有选中的 checkbox 元素 myCheckBoxes.each(function() { // 获取选中的 checkbox 元素的值 var value = $(this).val(); // 处理选中的值 // ... }); ``` 上述代码中，通过 `$()` 函数获取所有名为 `myCheckBox` 的 checkbox 元素，且已选中的元素。然后使用 `each()` 函数遍历选中的 checkbox 元素，获取其值并处理。其中，`:checked` 是用来过滤选中状态的伪类选择器。在 `input` 标签中使用 `name` 属性来标识 checkbox 元素。 ### 回答2： 在使用jQuery获取选中的checkbox时，可以使用以下几个方法： 1.使用prop()方法 在代码中使用prop方法来获取一个checkbox或者多个checkbox是否被选中。该方法可以获取一个或多个表单元素的属性值。通常，可以使用该方法来获取选中的checkbox的属性值。 //获取所有选中的checkbox var checkedValues = $('input:checkbox:checked').map(function() { return this.value; }).get(); //获取特定id的checkbox是否选中 if ($('#checkboxId').prop('checked')) { //执行操作 } 2.使用attr()方法 使用attr()方法来获取一个或多个checkbox元素的属性值，以判断是否被选中。如果需要判断多个checkbox值，可以循环遍历所有的checkbox元素。 //获取所有选中的checkbox var checkedValues = []; $("input[type='checkbox']").each(function() { if ($(this).attr('checked')) { checkedValues.push($(this).val()); //将所有选中的checkbox值加入数组中 } }); //获取特定id的checkbox是否选中 if ($('#checkboxId').attr('checked')) { //执行操作 } 3.使用is()方法 使用is()方法来找到所有选中的checkbox元素。这个方法比prop()方法和attr()方法都要简单，因为它只需要遍历所有的表单元素，找到选中的checkbox元素即可。 //获取所有选中的checkbox var checkedValues = []; $("input[type='checkbox']").each(function() { if ($(this).is(':checked')) { checkedValues.push($(this).val()); //将所有选中的checkbox值加入数组中 } }); //获取特定id的checkbox是否选中 if ($('#checkboxId').is(':checked')) { //执行操作 } 总之，使用jQuery获取checkbox选中的属性值非常简单，可以使用prop()方法、attr()方法或is()方法找到所有的选中的checkbox元素，并执行相应的操作。 ### 回答3： jQuery是一个非常流行的JavaScript库，它提供了适用于跨浏览器的JavaScript程序的快捷方式和方便的API。在网页中，checkbox是一种常用的HTML元素，用于选择一个或多个项目。当有多个checkbox时，我们通常需要用JavaScript获取选中的checkbox以便进行进一步的处理。 在使用jQuery获取选中的checkbox时，我们可以通过使用选定元素集合中的.filter()方法来筛选出所有选中的checkbox。代码如下： ``` $('input[type=checkbox]:checked').each(function() { // 处理选中的checkbox }); ``` 以上代码通过选择input元素中type为checkbox且被选中的元素来获取所有选中的checkbox。接下来使用.each()方法来遍历选中的checkbox集合并对每个元素进行处理。可以在.each()方法函数中访问选中的checkbox元素，进而对它们进行进一步的操作。 在处理多个checkbox时，还可以使用jQuery选择器来选择checkbox的父元素，然后使用.find()方法来查找选中的checkbox。例如： ``` $('#checkboxGroup').find('input[type=checkbox]:checked').each(function() { // 处理选中的checkbox }); ``` 以上代码首先选择id为“checkboxGroup”的父元素，然后查找所有选中的checkbox元素并对它们进行处理。这种方法可以让我们避免直接在HTML代码中书写JavaScript代码，提高了代码的可读性和维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值