jquery復(fù)選框多選賦值給文本框的方法
更新時間：2015年01月27日 10:19:26 投稿：shichen2014
這篇文章主要介紹了jquery復(fù)選框多選賦值給文本框的方法,涉及jQuery相關(guān)選擇器的使用技巧,需要的朋友可以參考下
本文實例講述了jquery復(fù)選框多選賦值給文本框的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery點擊復(fù)選框觸發(fā)事件給input賦值</title><base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery點擊復(fù)選框觸發(fā)事件給input賦值</title><base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能實例
這篇文章主要介紹了jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能,實例分析了jQuery企業(yè)網(wǎng)站焦點圖的詳細(xì)實現(xiàn)方法,非常簡單實用,需要的朋友可以參考下2015-04-04
jQuery的Ajax時無響應(yīng)數(shù)據(jù)的解決方法
今天做項目時發(fā)現(xiàn)永遠(yuǎn)響應(yīng)的值都是該頁面的html代碼。2010-05-05
基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)實現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2010-12-12
jquery trigger函數(shù)執(zhí)行兩次的解決方法
這篇文章主要介紹了jquery trigger函數(shù)執(zhí)行兩次的解決方法,詳細(xì)分析了trigger函數(shù)執(zhí)行兩次的原因與響應(yīng)的解決技巧,非常具有實用價值,需要的朋友可以參考下2016-02-02
下面小編就為大家?guī)硪黄猨Query 獲取屏幕高度、寬度的簡單實現(xiàn)案例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)可以編輯的表格,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07
jQuery getJSON()+.ashx 實現(xiàn)分頁(改進(jìn)版)
參考了上一篇Asp .net ＋jquery +.ashx 文件實現(xiàn)分頁并作了改進(jìn):ashx返回json數(shù)據(jù)，減少傳輸數(shù)據(jù)量，html頁面樣式控制也比較靈活，感興趣的朋友可以參考下哈2013-03-03
PHP+MySQL+jQuery隨意拖動層并即時保存拖動位置實例講解
這篇文章主要介紹了PHP+MySQL+jQuery隨意拖動層并即時保存拖動位置的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2015-10-10
Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實例講解)
由于Jquery中的Ajax的async默認(rèn)是true(異步請求),如果想一個Ajax執(zhí)行完后再執(zhí)行另一個Ajax, 需要把a(bǔ)sync=false就可以了2013-11-11
利用jQuery及AJAX技術(shù)定時更新GridView的某一列數(shù)據(jù)
這篇文章主要介紹了利用jQuery及AJAX技術(shù)定時更新GridView的某一列數(shù)據(jù)的方法,這里的GridView是指C#軟件開發(fā)中的GridView控件,需要的朋友可以參考下2015-12-12