jquery實現(xiàn)勾選復選框觸發(fā)事件給input賦值
更新時間：2015年02月01日 10:19:37 投稿：hebedich
本文給大家介紹的是一段十分實用的代碼，使用jQuery實現(xiàn)勾選復選框觸發(fā)事件給input賦值，在制作項目的時候經(jīng)常需要用到此功能，這里分享給大家。
代碼如下：
復制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns=" <head>
<title>jquery點擊復選框觸發(fā)事件給input賦值-柯樂義</title><base target="_blank" />
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a, img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
}
table {
empty-cells: show;
border-collapse: collapse;
border-spacing: 0;
}
/* tablist */
.tablist {
width: 400px;
border: solid 8px #ddd;
margin: 40px auto;
}
.tablist td {
line-height: 24px;
border-bottom: solid 1px #ddd;
text-align: left;
padding: 10px;
}
.tablist td input {
line-height: 20px;
margin-left: 5px;
}
.tablist td .txtValue
{
padding: 3px 0;
width: 180px;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="tablist">
<tr>
<td><input class="txtValue" type="text" name="keleyi" value="" /> <input type="checkbox" data-type="checkall" />全選</td>
</tr>
<tr>
<td>
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="張三" value="1" />張三
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="李四" value="2" />李四
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="柯樂義" value="3" />柯樂義
<input type="checkbox" name="keleyi" data-type="checkbox" data-value="趙六" value="4" />趙六
</td>
</tr>
</table>
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('[data-type="checkbox"]').click(function(){
var data_value = $(this).attr('data-value'),
txtalso = $.trim($(".txtValue").val());
if($(this).prop("checked")) {
if(txtalso.length > 0) {
if(txtalso.indexOf(data_value+',') != -1) {
return ;
} else {
txtalso += data_value + ',';
}
} else {
txtalso = data_value+',';
}
} else {
if(txtalso.indexOf(data_value+',') != -1) {
txtalso = txtalso.replace(data_value+',', '');
}
}
$(".txtValue").val(txtalso);
});
$('[data-type="checkall"]').click(function(){
var str = '';
if($(this).prop("checked")) {
$.each($('[data-type="checkbox"]'), function(i){
str += $(this).attr('data-value') + ',';
});
$('[data-type="checkbox"]').prop('checked', true);
} else {
$('[data-type="checkbox"]').prop('checked', false);
}
$(".txtValue").val(str);
});
});
</script>
</body>
</html>
以上就是本代碼的全部了，小伙伴們自由擴展，美化，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要為大家詳細介紹了jQuery三級下拉列表導航菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了jQuery遍歷Table的具體實現(xiàn),需要的朋友可以參考下2014-04-04
后代，就是當前元素的所有后代，都算，子元素，就是當前元素的子集，再往下走就不算了2014-04-04
這篇文章主要介紹了jquery實現(xiàn)鼠標懸浮停止輪播特效，鼠標懸停在圖片上則停止輪播，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了基于Jquery代碼實現(xiàn)手風琴菜單，代碼簡單易懂，需要的朋友參考下2015-11-11
jQuery實現(xiàn)鼠標懸停背景翻轉(zhuǎn)的黑色導航菜單代碼
這篇文章主要介紹了jQuery實現(xiàn)鼠標懸停背景翻轉(zhuǎn)的黑色導航菜單代碼,涉及jQuery鼠標事件結(jié)合animate動畫實現(xiàn)背景翻轉(zhuǎn)效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
ajax異步刷新實現(xiàn)更新數(shù)據(jù)庫
下面寫關(guān)于如何把無刷新的數(shù)據(jù)寫入到數(shù)據(jù)庫中,需要的朋友可以參考下2012-12-12
jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法，在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因，這兩個問題都非常多見，感興趣的朋友一起看下吧2016-08-08
jQuery.autocomplete 支持中文輸入(firefox)修正方法
jQuery.autocomplete 是jquery的流行插件，，能夠很好的實現(xiàn)輸入框的自動完成(autocomplete)、建議提示(input suggest)功能，支持ajax數(shù)據(jù)加載。2011-03-03
jQuery實現(xiàn)的Tab滑動選項卡及圖片切換(多種效果)小結(jié)
這篇文章主要介紹了jQuery實現(xiàn)的Tab滑動選項卡及圖片切換效果小結(jié),實例總結(jié)了幾種常見的tab切換效果,包括鼠標點擊切換、滑過切換、定時自動切換等,非常具有實用價值,需要的朋友可以參考下2015-09-09