jquery表格复选框简单练习及prop(),attr()的应用原则

table_style.css 样式table        { border:0;border-collapse:collapse;}
td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even        { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/
.selected        { background:#FF6500;color:#fff;}

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/table_style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script><script type="text/javascript">//这里用的jquery版本是3.1.1//这里关于如何选择用prop和attr//第一原则:只添加属性名称该属性就会生效应该使用prop;//第二原则:只㛮true/false的属性使用prop  比如disabled 和checked 这些属性 否则你下面会出现bug
        $(function(){$("tbody>tr:odd").addClass("odd");$("tbody>tr:even").addClass("even");$('tbody>tr').click(function() {/*     if ($(this).hasClass('selected')) {$(this).removeClass('selected').find(':checkbox').prop('checked',false);}else{$(this).addClass('selected').find(':checkbox').prop('checked',true);} */var hasSelected=$(this).hasClass("selected");//三元运算
             $(this)[hasSelected ? "removeClass" : "addClass"]('selected')//  注意这里不能用attr仔细一点你就会发现bug如果用attr
                    .find(":checkbox").prop('checked',!hasSelected);});});</script><body><table><thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbody><tr><td><input type="checkbox" name="choice" value=""/></td><td>张山</td><td>男</td><td>浙江宁波</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>李四</td><td>女</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td><td>王五</td><td>男</td><td>湖南长沙</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>找六</td><td>男</td><td>浙江温州</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr><td><input type="checkbox" name="choice" value="" /></td><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table></body>
</html>

转载于:https://www.cnblogs.com/hu-bo/p/6598981.html

jquery表格复选框简单练习及prop(),attr()的应用原则相关推荐

jquery判断复选框选中状态以及区分attr和prop
这篇文章主要介绍了jquery判断复选框选中状态以及区分attr和prop,感兴趣的小伙伴们可以参考一下最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr()获取 ...
html简单获取多选框的,jquery获取复选框的值的简单实例
JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码对checkbox的其他几个操作 1. 全选 2. 取消全选 3. 选中所有奇数 4. 反选 5. 获得选中的所有值 js代码 $( ...
javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
将jQuery的复选框设置为“已选中”？
我想做这样的事情来使用jQuery勾选一个checkbox : $(".myCheckBox").checked(true); 要么 $(".myCheckBox&quo ...
JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
LayUI数据表格复选框显示不居中问题
LayUI数据表格复选框显示不居中问题样式(layui.css)文件中增加: .layui-table-cell .layui-form-checkbox[lay-skin="primar ...
js,jquery获取复选框checkbox被选中的值
转载:https://blog.csdn.net/qq_35792598/article/details/76646983 <!DOCTYPE html PUBLIC "-//W3C/ ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...

jquery表格复选框简单练习及prop(),attr()的应用原则

jquery表格复选框简单练习及prop(),attr()的应用原则相关推荐

最新文章

热门文章