`

jQuery操作checkbox选择

阅读更多

 

 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 全选
            $("#btnCheckAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", true);
            });
  
            // 全不选
            $("#btnCheckNone").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", false);
            });
  
            // 反选
            $("#btnCheckReverse").bind("click", function () {
                $("[name = chkItem]:checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
  
            // 全不选
            $("#btnSubmit").bind("click", function () {
                var result = new Array();
                $("[name = chkItem]:checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        result.push($(this).attr("value"));
                    }
                });
  
                alert(result.join(","));
            });
        });
    </script>
</head>
<body>
    <div>
        <input name="chkItem" type="checkbox" value="今日话题" />今日话题
        <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
        <input name="chkItem" type="checkbox" value="财经" />财经
        <input name="chkItem" type="checkbox" value="汽车" />汽车
        <input name="chkItem" type="checkbox" value="科技" />科技
        <input name="chkItem" type="checkbox" value="房产" />房产
        <input name="chkItem" type="checkbox" value="旅游" />旅游
    </div>
    <div>
        <input id="btnCheckAll" type="button" value="全选" />
        <input id="btnCheckNone" type="button" value="全不选" />
        <input id="btnCheckReverse" type="button" value="反选" />
        <input id="btnSubmit" type="button" value="提交" />
    </div>
</body>
</html>

 

 

 

 

 

 

2、checkbox table选中

效果图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
        }
        td
        {
            border: 1px solid #ccc;
        }
    </style>
    <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // chkAll全选事件
            $("#chkAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", this.checked);
            });
  
            // chkItem事件
            $("[name = chkItem]:checkbox").bind("click", function () {
                var $chk = $("[name = chkItem]:checkbox");
                $("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
            })
        });
    </script>
</head>
<body>
    <table id="tb">
        <thead>
            <tr>
                <td>
                    <input id="chkAll" type="checkbox" />
                </td>
                <td>
                    分类名称
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="今日话题" />
                </td>
                <td>
                    今日话题
                </td>
            </tr>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="视觉焦点" />
                </td>
                <td>
                    视觉焦点
                </td>
            </tr>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="财经" />
                </td>
                <td>
                    财经
                </td>
            </tr>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="汽车" />
                </td>
                <td>
                    汽车
                </td>
            </tr>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="科技" />
                </td>
                <td>
                    科技
                </td>
            </tr>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="房产" />
                </td>
                <td>
                    房产
                </td>
            </tr>
            <tr>
                <td>
                    <input name="chkItem" type="checkbox" value="旅游" />
                </td>
                <td>
                    旅游
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

分享到:
评论

相关推荐

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...

    JQuery操作checkbox、radio等示例

    以下是一些常见的jQuery操作: 1. **选择元素**:jQuery提供了多种选择器,如`$("[type=checkbox]")`和`$("[type=radio]")`,可以用来选取页面上所有的checkbox或radio元素。如果你想选择具有特定ID或类名的元素,...

    jQuery 对checkbox的操作

    jQuery 对checkbox的操作

    jquery 的checkbox样式

    接着,可以通过jQuery选择器来选中需要改变样式的复选框,并调用插件提供的方法来应用样式。例如,如果所有的复选框都有一个统一的class名`custom-checkbox`,可以这样写: ```javascript $(document).ready...

    jquery 对checkbox的操作

    本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...

    jquery checkbox 选中 取消 checkbox多选

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 ...

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...

    jquery 操作checkbox 和select

    一、jQuery操作checkbox 1. 检查状态: jQuery提供了`is()`方法来检查checkbox是否被选中。例如,如果有checkbox的ID为"myCheckbox",可以这样检查它的状态: ```javascript if($("#myCheckbox").is(":checked")) {...

    jquery之checkbox操作(v1.0.0)

    在本教程中,我们将深入探讨如何使用jQuery来操作checkbox元素,特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先,让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素,用于让用户对一...

    jquery获取checkbox选中的值

    以上就是使用jQuery获取和操作checkbox选中值的基本方法。这些技巧在处理多选数据、用户交互和表单提交时非常有用。通过结合CSS类和DOM操作,可以进一步完善用户体验,如添加视觉反馈或动画效果。在实际项目中,确保...

    jQuery操作checkbox

    本篇文章将深入探讨如何使用jQuery来操作checkbox元素,包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中,我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...

    jQuery操作checkbox选择(list/table)

    本文将详细介绍如何使用jQuery库来操作网页中的复选框checkbox,实现checkbox列表(list)和复选框表格(table)的选中功能。文中将通过实例代码...通过本文的介绍,希望能够帮助到对jQuery操作复选框感兴趣的开发者们。

    jquery input checkbox 联动

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互。本文将深入探讨如何在jQuery环境下实现输入框(input)复选框(checkbox)的联动效果,即当某个复选框被选中时,...

    jQuery Checkbox列表双向选择移动代码

    3. **jQuery操作**: 接下来,我们需要使用jQuery来处理按钮点击事件,并实现Checkbox的移动功能。以下是一个简单的示例: ```javascript $(document).ready(function() { $('#leftArrow').click(function() { ...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    jquery radio checkbox 美化

    综上所述,"jQuery radio checkbox美化"涉及到前端开发中的多方面技能,包括jQuery的选择器和事件处理、CSS样式设计、插件应用、自定义图标、响应式设计以及无障碍性考虑。通过学习和实践这些技巧,可以创建出既美观...

    jQuery实现CheckBox控件CheckListBox全选功能

    C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作,通过CheckBox来全选CheckBoxList,当有一个CheckBoxList选中时,CheckBox则被选中,且并且可以取得选中的CheckBox和CheckBoxList的value和text

    jquery操作Radio、Checkbox、Select Demo

    二、jQuery操作Checkbox复选框 Checkbox则允许用户多选,我们同样可以使用`.prop()`或`.attr()`来检查或取消选中,使用`.is()`检查是否已被选中。 1. **设置Checkbox选中状态**: ```javascript $('input[type=...

Global site tag (gtag.js) - Google Analytics