主页 / 网络编程 /

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

网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了jquery复选框多选赋值给文本框的方法,涉及jQuery相关选择器的使用技巧,需要的朋友可以参考下

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

代码如下:
<!DOCTYPE html> 
<html xmlns="http://.w3./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程序设计有所帮助。

上一篇：js获取元素外链样式的方法 下一篇：jQuery+ajax实现动态执行脚本的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by