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 相关文章推荐
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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
VOLVO车载收音机
2021/03/02 无线电
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
PHP中echo和print的区别
2014/08/28 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
工程师自我评价怎么写
2013/09/19 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
安全生产宣传标语
2014/06/06 职场文书
南京青奥会口号
2014/06/12 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
行政前台岗位职责
2015/04/16 职场文书
律师催款函范文
2015/06/24 职场文书