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

前端技术 2023/09/02 JavaScript 
<!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\');
})

本文地址：https://www.stayed.cn/item/5485

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案