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

2019-11-20 11:36:09

字体：大中小

来源：转载

供稿：网友

<!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>

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满屏焦点图左右滚动特效代码分享

下一篇：jquery中val()方法是从最后一个选项往前读取的