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 相关文章推荐
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
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 substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
js自定义回调函数
2015/12/13 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
护士辞职信模板
2014/01/20 职场文书
授权委托书
2014/07/31 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技