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 相关文章推荐
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
easyui validatebox验证
2016/04/29 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
js实现简单图片拖拽效果
2021/02/22 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python函数中定义参数的四种方式
2014/11/30 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python模拟用户登录验证
2017/09/11 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
css3学习心得分享
2013/08/19 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
学生个人自我鉴定
2014/03/26 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
十佳青年事迹材料
2014/08/21 职场文书