jQuery - 选中复选框则弹出提示框

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>判断是否选中</title>
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //方法1;JavaScript的DOM对象转为jquery对象
            var oinput=document.getElementsByTagName("input")[0];
            var $oinput=$(oinput);
            $oinput.click(function(){
                if($(this).attr("checked")){  //attr() 方法用于获取或者设置jQuery对象的属性
//                    alert("已接受条款,可以注册!")
                }
            })

            // 方法2 jQuery对象转为DOM对象
//            oinput = $("input")[0];
            oinput=$("input").get(0);
            oinput.onclick=function(){
                if(this.checked){
                    alert("已接受条款,可以注册!")
                }
            }
        });
    </script>
</head>
<body>
<input type="checkbox" value="1" />请先阅读<a href="javascript:">条款</a>并接受
</body>
</html>
选中复选框则弹出提示框

 

转载于:https://www.cnblogs.com/xtdxs/p/6613726.html

可以使用以下代码实现上述功能: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格操作</title> <style type="text/css"> table { border-collapse: collapse; margin: 20px; } th, td { padding: 10px; border: 1px solid black; } .header { background-color: #CCCCCC; } .even { background-color: #F7F7F7; } .odd { background-color: #FFFFFF; } .selected { background-color: #FFCCCC; } </style> </head> <body> <table> <tr class="header"> <th><input type="checkbox" id="checkAll"></th> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>城市</th> <th>操作</th> </tr> <tr class="odd"> <td><input type="checkbox" class="checkItem"></td> <td>1</td> <td>张三</td> <td>20</td> <td>北京</td> <td><button class="deleteBtn">删除</button></td> </tr> <tr class="even"> <td><input type="checkbox" class="checkItem"></td> <td>2</td> <td>李四</td> <td>25</td> <td>上海</td> <td><button class="deleteBtn">删除</button></td> </tr> <tr class="odd"> <td><input type="checkbox" class="checkItem"></td> <td>3</td> <td>王五</td> <td>30</td> <td>广州</td> <td><button class="deleteBtn">删除</button></td> </tr> <tr class="even"> <td><input type="checkbox" class="checkItem"></td> <td>4</td> <td>赵六</td> <td>35</td> <td>深圳</td> <td><button class="deleteBtn">删除</button></td> </tr> </table> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { // 全选/取消全选 $("#checkAll").click(function() { $(".checkItem").prop("checked", $(this).prop("checked")); }); // 表格行背景色变化 $("tr").hover( function() { $(this).addClass("selected"); }, function() { $(this).removeClass("selected"); } ); // 删除按钮击事件 $(".deleteBtn").click(function() { var checkedItems = $(".checkItem:checked"); if (checkedItems.length === 0) { alert("请至少选择一项进行删除!"); } else { if (confirm("确定删除选中的数据吗?")) { checkedItems.each(function() { $(this).parents("tr").remove(); }); } } }); }); </script> </body> </html> ``` CSS样式中定义了表格的基本样式,以及鼠标经过时和选中时的行背景色。表格中每行的第一个单元格都是复选框,用于选择要删除的行。全选复选框的 ID 为 `checkAll`,每个单元格复选框的类名为 `checkItem`,删除按钮的类名为 `deleteBtn`。 JavaScript代码中使用了 jQuery 库来简化代码,实现了三个功能: 1. 全选/取消全选:当全选复选框选中时,将所有单元格复选框选中状态与全选复选框保持一致;当全选复选框取消选中时,将所有单元格复选框都取消选中状态。 2. 表格行背景色变化:使用 jQuery 的 `hover()` 方法,当鼠标进入或离开行时,分别添加或删除 `selected` 类名,改变行的背景色。 3. 删除按钮击事件:当击删除按钮时,首先判断是否有复选框选中,如果没有则弹出提示框;否则,弹出确认框,确认删除选中的数据。如果确认删除,则遍历每个被选中复选框,找到对应的行,从表格中删除该行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值