编程 Javascript

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');
})

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

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript web页面刷新的方法收集

Jul 02 Javascript

JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

Jan 12 Javascript

深入理解JavaScript系列（16）闭包（Closures）

Apr 12 Javascript

js获取本机的外网/广域网ip地址完整源码

Aug 12 Javascript

javascript实现百度翻译可折叠的分享按钮列表

Mar 12 Javascript

详解如何较好的使用js

Dec 16 Javascript

利用node.js制作命令行工具方法教程（一）

Jun 22 Javascript

form表单序列化详解（推荐）

Aug 15 Javascript

解决使用vue.js路由后失效的问题

Mar 17 Javascript

微信小程序实现默认第一个选中变色效果

Jul 17 Javascript

jQuery实现基本淡入淡出效果的方法详解

Sep 05 jQuery

js类的继承定义与用法分析

Jun 21 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

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

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