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對單選框,多選框,文本框等常見操作小結(jié)
- 簡單實(shí)現(xiàn)jQuery多選框功能
- jQuery對下拉框,單選框,多選框的操作
- jQuery多選框選擇數(shù)量限制方法
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
- Jquery多選框互相內(nèi)容交換的實(shí)例代碼
- jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
- jQuery實(shí)現(xiàn)獲取多選框的值示例
相關(guān)文章
JQuery 給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery 給元素綁定click事件多次執(zhí)行的解決方法,比較實(shí)用，需要的朋友可以參考下2014-09-09
jQuery動(dòng)態(tài)星級(jí)評分效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery動(dòng)態(tài)星級(jí)評分效果實(shí)現(xiàn)方法,涉及jquery動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,效果華麗大氣,是一款非常優(yōu)秀的特效源碼,需要的朋友可以參考下2015-08-08
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級(jí)版,e-calendar是一個(gè)jQuery插件,創(chuàng)建一個(gè)事件日歷它很容易使用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
基于jquery的實(shí)現(xiàn)異步跨域提交表單的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
本文主要介紹了jQuery中$.ajax()方法的具體使用，$.ajax(url,[settings])通過 HTTP 請求加載遠(yuǎn)程數(shù)據(jù)，文中通過示例代碼詳細(xì)的介紹了$.ajax()的用法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
jQuery內(nèi)容折疊效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實(shí)例形式分析了jQuery展開折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
jquery無法為動(dòng)態(tài)生成的元素添加點(diǎn)擊事件的解決方法(推薦)
下面小編就為大家?guī)硪黄猨query無法為動(dòng)態(tài)生成的元素添加點(diǎn)擊事件的解決方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
JQuery 是一款快速、易于使用的 JavaScript 框架。芒果介紹幾個(gè)實(shí)用的 JQuery 技巧和竅門。2010-04-04
使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能
表單驗(yàn)證功能在項(xiàng)目中經(jīng)常會(huì)用得到，接下來給大家介紹使用jquery實(shí)現(xiàn)智能表單驗(yàn)證功能實(shí)例代碼，對jquery實(shí)現(xiàn)表單驗(yàn)證功能相關(guān)資料感興趣的朋友一起學(xué)習(xí)吧2016-03-03
這篇文章主要介紹了JQuery控制radio選中和不選中方法總結(jié),本文起講解了設(shè)置選中方法、設(shè)置選中和不選中示例、另一種設(shè)置選中方法、根據(jù)值設(shè)置radio選中、使用prop方法操作示例等內(nèi)容,需要的朋友可以參考下2015-04-04