Js读取check的几种方法

最新推荐文章于 2024-04-06 18:08:01 发布

原创最新推荐文章于 2024-04-06 18:08:01 发布 · 9.6k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个HTML表单示例，展示了如何使用原生JavaScript及不同版本的jQuery来获取复选框的选择状态，并提供了全选、取消选择及反选的功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，编写HTML如下：

   <form id="form1">
        <table  border="0">
          <tr>
                <td>编程语言：</td>
                <td>
                    <input name="language" type="checkbox"  value="java" />java
                    <input name="language" type="checkbox"  value="c" />c
                    <input name="language" type="checkbox"  value="c++" />c++
                    <input name="language" type="checkbox"  value="c#" />c#
                    <input name="language" type="checkbox"  value="vb" />vb
                </td>
            </tr>
        </table>
   </form>

代码

       function readcheck() {

            // 方法一
            var obj = document.getElementsByName('language');            
            var s = '';
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].checked) s += obj[i].value + ',';
            }
            alert(s == '' ? '你还没有选择任何内容！' : s);    

            // 方法二
            var selectedValues = [];
            $("input[name='language']:checked").each(function(){            
                selectedValues.push( $(this).val());
            });
            alert(selectedValues);

            // 方法三  jquery版本在1.3之前 (FF和chrome下无效)
            var selectedValues = [];
            $("input[name='language'][checked]").each(function() {
                selectedValues.push($(this).val());
            });
            alert(selectedValues);

        }

        // 全选
        function selectall() {
            $("input[name='language']").attr("checked", 'true');

        }

        // 不选
        function selectno() {
            $("input[name='language']").removeAttr("checked");

        }

        // 反选
        function fanxuan() {
            $("input[name='language']").each(function() {
                if ($(this).attr("checked")) {
                    $(this).removeAttr("checked");
                } else {
                    $(this).attr("checked", 'true');
                }
            });

        }

刚才测试，发现了个问题：jquery版本1.3之后，用[ ] 的写法，在FF和和Chrome浏览器无法有效读取数据。