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


Posted in Javascript onJanuary 27, 2015

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

Javascript 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
js中文逗号转英文实现
Feb 11 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
用console.table()调试javascript
Sep 04 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery+ajax实现动态执行脚本的方法
Jan 27 #Javascript
javascript将异步校验表单改写为同步表单
Jan 27 #Javascript
JavaScript中实现sprintf、printf函数
Jan 27 #Javascript
javascript批量修改文件编码格式的方法
Jan 27 #Javascript
JavaScript中的包装对象介绍
Jan 27 #Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 #Javascript
浅谈JavaScript Math和Number对象
Jan 26 #Javascript
You might like
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php中session使用示例
2014/03/29 PHP
jquery 插件开发备注
2010/08/27 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
js实现星星打分效果
2020/07/05 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python实现OpenCV的安装与使用示例
2018/03/30 Python
python反编译学习之字节码详解
2019/05/19 Python
PyQt5响应回车事件的方法
2019/06/25 Python
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
调解协议书
2014/04/16 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
销售类求职信
2014/06/13 职场文书
校运会新闻稿
2015/07/17 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
如何写好活动总结
2019/06/21 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android