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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php中JSON的使用与转换
2015/01/14 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python统计文章中单词出现次数实例
2020/02/27 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
端午节演讲稿
2014/05/23 职场文书
个人简历求职信范文
2015/03/20 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
python创建字典及相关管理操作
2022/04/13 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL