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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JScript中的条件注释详解
Apr 24 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
yii实现级联下拉菜单的方法
2014/07/31 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Python和Go语言的区别总结
2019/02/20 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
高级销售员求职信
2013/10/25 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
房产委托公证书
2014/04/08 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
英文产品推荐信
2015/03/27 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
调解协议书范本
2016/03/21 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL