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 相关文章推荐
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Bootstrap table使用方法总结
May 10 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
layUI实现列表查询功能
Jul 27 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
javaScript Array api梳理
Mar 31 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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python3 re返回形式总结
2020/11/20 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国复古服装购物网站:Collectif
2019/10/30 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
护士个人年度总结范文
2015/02/13 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server