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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
vue 子组件修改data或调用操作
Aug 07 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框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
python解析json实例方法
2013/11/19 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
xml有哪些解析技术?区别是什么
2016/04/26 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
Unix如何添加新的用户
2014/08/20 面试题
团员个人的自我评价
2013/12/02 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
解除劳动合同协议书
2014/09/17 职场文书
先进工作者申报材料
2014/12/23 职场文书
整改通知书格式
2015/04/22 职场文书
如何理解及使用Python闭包
2021/06/01 Python