jQuery操作checkbox选择

最新推荐文章于 2023-12-08 11:00:27 发布
最新推荐文章于 2023-12-08 11:00:27 发布
阅读量451 收藏
点赞数
分类专栏： Javascript

1、checkbox list选择

效果图：

代码：

复制代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
记得微笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作checkbox选择(list/table)
10-27
本文将介绍下checkbox list选择及checkbox table选中附效果图，感兴趣的朋友可以参考下哈，希望可以帮助到你
使用 jQuery 为复选框设置“选中”
kalman2019的博客
12-11 1万+
我想做这样的事情来使用 jQuery 勾选 checkbox：或者这样的事情存在吗？
jquery操作checkbox示例分享
10-25
主要介绍了jquery操作checkbox,需要的朋友可以参考下
jQuery 对checkbox的操作
03-09
jQuery 对checkbox的操作
jQuery操作复选框checkbox技巧总结
Golden的专栏
10-28 9627
jQuery操作复选框checkbox技巧总结 设置选中、取消选中、获取被选中的值、判断是否选中等 一、checked属性定义 先了解下input标签的checked属性： 1、HTML <input> checked 属性 ◆ 定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 checked 属性适用于 <input type="checkbox"> 和 <inp..
Knockout中checkbox绑定click冲突
a736755244的博客
11-20 835
Knockout中checkbox绑定click冲突
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
有范管理美学 | 公众号/头条号：有范管理美学
08-21 12万+
jQuery操作复选框checkbox技巧总结 --- 设置选中、取消选中、获取被选中的值、判断是否选中等 一、checked属性定义 先了解下input标签的checked属性： 1、HTML <input> checked 属性 ◆定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> ...
jquery复选框(全选/取消全选/反选/查看选中项）
最新发布
有没有认真工作的博客
12-08 460
【代码】jquery复选框(全选/取消全选/反选/查看选中项）
checkbox选中和不选中 jqu_jquery checkbox怎么选中和不选中？
weixin_31319027的博客
12-24 302
展开全部$(function () {// 动态绑定默认状态// $("#ck").attr("checked",true)//选中// $("#ck").attr("checked",false)//未选中//点击判断选中还是未选中$("#ck").click(function () {if ($(this).is(":checked")) {alert("选中");} else {alert...
Jquery—JQuery对checkbox的操作(01)
gaohuanjie的专栏
04-01 4989
JQuery实现radio、select、checkbox禁用 $(document).ready(function(){ var input = $("#radioDiv").find("input:radio"); input.attr("disabled","disabled"); input.each(function()
jQuery点击行选中checkbox
liuxiaohu666的博客
12-28 848
自己的一些心得，可能不是最优，希望能给你带来一些灵感 <table id="datas"> <tr> <td></td> <td>标题1</td> <td>标题2</td> <td>标题3</td> </tr&g...
jQuery checkbox 选中事件小案例.
weak1003的博客
05-03 2348
先创建视图写出大概布局 并且引入jQuery插件。 再对其添加stylr样式如下 呈现样式如下 先给button添加一个点击事件。 然后通过for循环遍历所有的input标签 再通过checked(属性可设置或返回某个单选按钮是否被选中。) 从而设置为true 便可实现勾选的效果。 $("#btn1").click(function () { they1 = $("inp...
jquery获取checkbox选中的值
xiaopzi的博客
12-16 2万+
jquery获取checkbox选中的值，包括全选 取消全选 反选 选中奇数行 获取选中的值 这里有一个注意点：使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来，所以改成使用prop 下面直接上代码 demo下载 <input type="checkbox" name="xpz" value="1"/>苹果 <input type="checkbox" name="xpz" value="2"/>橘子 <inpu
JQuery 分组复选框操作(使用了bind绑定事件)
limlimlim的专栏
07-04 5648
#main{width:560px;margin:100px auto;padding:10px;background-color:gold;text-align:center;}                     fieldset{width:500px;margin:10px;auto;}         span{margin-left:10px;}          
jquery判断checkbox是否选中及改变checkbox状态
热门推荐
世上无难事，只要肯攀登
09-10 28万+
本文转载自：http://www.wufangbo.com/jquery-pan-duan-checked/ jquery判断checked的三种方法: .attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop('checked'): //16+:true/false .is(
jquery checkbox 选中事件
05-19
可以使用 jQuery 的 `change()` 事件来监听 checkbox 的选中状态变化。示例代码如下： ```html <input type="checkbox" id="myCheckbox">选项1 $(document).ready(function() { $('#myCheckbox').change...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值