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

2019/6/29 22:30:44

编程Tag： 方法 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复选框多选赋值给文本框的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章