编程 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 存在陷阱删除某一区域所有节点

May 10 Javascript

写给想学习Javascript的朋友一点学习经验小结

Nov 23 Javascript

jquery ajax对特殊字符进行转义防止js注入使用示例

Nov 21 Javascript

js showModalDialog 弹出对话框的简单实例(子窗体)

Jan 07 Javascript

Jquery实现自定义弹窗示例

Mar 12 Javascript

深入解析JavaScript中的arguments对象

Jun 12 Javascript

jquery属性,遍历,HTML操作方法详解

Sep 17 Javascript

Bootstrap如何激活导航状态

Mar 22 Javascript

微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

Nov 27 Javascript

js中位运算的运用实例分析

Dec 11 Javascript

swiper自定义分页器的样式

Sep 14 Javascript

Vue获取微博授权URL代码实例

Nov 04 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中表单多选框的一种巧妙写法