jquery实现勾选复选框触发事件给input赋值


Posted in Javascript onFebruary 01, 2015

代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" />

<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>

以上就是本代码的全部了,小伙伴们自由扩展,美化,希望大家能够喜欢。

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JS实现手风琴特效
Nov 08 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
jQuery结合HTML5制作的爱心树表白动画
Feb 01 #Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 #Javascript
JavaScript插件化开发教程(六)
Feb 01 #Javascript
JavaScript插件化开发教程(五)
Feb 01 #Javascript
对JavaScript中this指针的新理解分享
Jan 31 #Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 #Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 #Javascript
You might like
基于PHP读取csv文件内容的详解
2013/06/18 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python中的tuple元组详细介绍
2015/02/02 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python实现贪吃蛇游戏
2020/03/21 Python
简单了解Python3里的一些新特性
2019/07/13 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
路政管理毕业自荐书范文
2014/02/10 职场文书
小学敬老月活动方案
2014/02/11 职场文书
作文批改评语
2014/12/25 职场文书
工作时间调整通知
2015/04/24 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP