jquery复选框多选赋值给文本框的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了jquery复选框多选赋值给文本框的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:
<!DOCTYPE html> 
<html xmlns=\"http://www.w3.org/1999/xhtml\"> 
<head> 
<title>jquery点击复选框触发事件给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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3363

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案