jquery中表单 多选框的一种巧妙写法


Posted in Javascript onSeptember 06, 2015
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even");
  $('tbody>tr').click(function(){
    var hasSelected = $(this).hasClass('selected');
    $(this)[hasSelected ? "removeClass" : "addClass"]('selected').find(':checkbox').attr('checked', !hasSelected);
  });
  $('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th></th>
    <th>s</th>
    <th>sd</th>
    <th>sdasdsa sda</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>s</td>
    <td>s</td>
    <td>sdadsadsd</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>sadasdsd</td>
    <td>s</td>
    <td>sads</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value="" checked='checked'/></td>
    <td>sas</td>
    <td>s</td>
    <td>aasdsad sad</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>ss</td>
    <td>ssad</td>
    <td>dadsadsad</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>Rain</td>
    <td>sd</td>
    <td>sdsad sad asd </td>
  </tr>
  <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>MAXMAN</td>
    <td>s</td>
    <td>实打实的速度是</td>
  </tr>
  </tbody>
</table>
</body>
</html>

jquery中表单 多选框的一种巧妙写法

radio 写法:

$(function(){
  $("tbody>tr:odd").addClass("odd"); 
  $("tbody>tr:even").addClass("even"); 
  $('tbody>tr').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked', true);
  });
// $('table :radio:checked').parent().parent().addClass('selected');
  $('table :radio:checked').parents("tr").addClass('selected');
//$('tbody>tr:has(:checked)').addClass('selected');

})

checkbox写法:

$(function(){
  $("tbody>tr:odd").addClass("odd");
  $("tbody>tr:even").addClass("even"); 
  $('tbody>tr').click(function(){
    if($(this).hasClass('selected')){
      $(this).removeClass('selected').find(':checkbox').attr('checked', false);
    }else{
      $(this).addClass('selected').find(':checkbox').attr('checked', true);
    }
  });
// $('table :checkbox:checked').parent().parent().addClass('selected');
  $('table :checkbox:checked').parents("tr").addClass('selected');
  //$('tbody>tr:has(:checked)').addClass('selected');
})
Javascript 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jquery 图片轮换效果
Jul 29 Javascript
javascript操作referer详细解析
Mar 10 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 #Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 #Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 #Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 #Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 #Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 #Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 #Javascript
You might like
Laravel框架表单验证详解
2014/09/04 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
使用URL传输SESSION信息
2015/07/14 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python获取本机外网ip的方法
2015/04/15 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
详解Python自建logging模块
2018/01/29 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
创业计划书六个要素
2013/12/26 职场文书
人事专员工作职责
2014/02/22 职场文书
治庸问责心得体会
2014/09/12 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
导游词之日本富士山
2020/01/06 职场文书