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

<！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"）;}）

首页 / 脚本样式 / JavaScript / jquery中表单 多选框的一种巧妙写法

首页 / 脚本样式 / JavaScript / jquery中表单多选框的一种巧妙写法