jquery中表單 多選框的一種巧妙寫法
更新時(shí)間:2015年09月06日 21:09:37 投稿:mdxy-dxy
這篇文章主要介紹了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>實(shí)打?qū)嵉乃俣仁?lt;/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 獲取多選框的值及多選框中文的函數(shù)
- jQuery實(shí)現(xiàn)的多選框多級(jí)聯(lián)動(dòng)插件
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jquery對(duì)單選框,多選框,文本框等常見操作小結(jié)
- 簡單實(shí)現(xiàn)jQuery多選框功能
- jQuery對(duì)下拉框,單選框,多選框的操作
- jQuery多選框選擇數(shù)量限制方法
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
- Jquery多選框互相內(nèi)容交換的實(shí)例代碼
- jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
- jQuery實(shí)現(xiàn)獲取多選框的值示例
相關(guān)文章
jQuery中select與datalist制作下拉菜單時(shí)的區(qū)別淺析
一般我們通常使用select制作下拉菜單,但是H5之后,datalist也可以充當(dāng)select的角色,而且兩者還有一點(diǎn)小的不同。具體區(qū)別詳解小編通過本文給簡單介紹下2016-12-12jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
這篇文章主要介紹了jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery事件綁定、解綁、事件冒泡、阻止冒泡等相關(guān)原理與應(yīng)用技巧,需要的朋友可以參考下2019-05-05基于Jquery的開發(fā)個(gè)代陰影的對(duì)話框效果代碼
基于Jquery的開發(fā)個(gè)代陰影的對(duì)話框效果代碼,需要的朋友可以參考下。2011-07-07jQuery制作input提示內(nèi)容(兼容IE8以上)
這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容,兼容IE8以上,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07基于jQuery實(shí)現(xiàn)點(diǎn)擊列表加載更多效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)點(diǎn)擊列表加載更多效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼,仿京東、淘寶等各大類網(wǎng)站效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11