jquery中表单 多选框的一种巧妙写法
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了jquery 表单 多选框的一种巧妙写法 ,需要的朋友可以参考下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://.w3./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>
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'); })
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程