jQuery教程

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

本文主要是介绍jquery复选框多选赋值给文本框的方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文实例讲述了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程序设计有所帮助。

这篇关于jquery复选框多选赋值给文本框的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!