体验效果：http://keleyi.com/keleyi/phtml/jqtexiao/31.htm

代码如下：

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

<div><a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/a/bjae/du3d362n.htm">原文</a> <a href="http://keleyi.com/keleyi/phtml/">特效</a> <a href="http://keleyi.com/jq/hovertree/">HoverTree</a></div>

<table cellpadding="0" cellspacing="0" class="tablist">

<tr>

<td><input class="txtValue" type="text" name="keleyi" value="" />&nbsp;&nbsp;<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="http://keleyi.com/keleyi/pmedia/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>

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

jquery点击复选框触发事件给input赋值的更多相关文章

  1. 【转载】jquery实现勾选复选框触发事件给input赋值+回显复选框

    引用:https://blog.csdn.net/rui276933335/article/details/45717461 JSP: <td class="as1"> ...

  2. easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

    在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点 ...

  3. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  4. extjs 点击复选框在表格中增加相关信息行

    功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 va ...

  5. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  7. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  8. 【jQuery】对于复选框操作的attr与prop

    这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...

  9. extjs grid 复选框选择事件

    开发中需求是统计选择的行数,所以要监控checkbox的选择事件包括表头的全选事件 遇到的问题就不赘述了 方案是监控grid的复选框和行加载时绑定事件 baseView: DBEN.controls. ...

随机推荐

  1. Python标准库的threading.Thread类(转自别人的翻译)

    这个类表示在单独的控制线程中运行的活动.有两种方法可以指定这种活动,给构造函数传递回调对象,或者在子类中重写run() 方法.其他方法(除了构造函数)都不应在子类中被重写.换句话说,在子类中只有__i ...

  2. C#设计模式系列：工厂方法模式（Factory Method）

    1. 工厂方法模式简介 1.1 定义 工厂方法模式定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法模式是以一个类的实例化延迟到其子类. Factory Method模式用于在不指定待创建 ...

  3. Linux常用网络命令

    1.tracepath tracepath追踪出到指定的目的地址的网络路径,并给出在路径上的每一跳(hop).如果你的网络有问题或是慢了,tracepath可以查出网络在哪里断了或是慢了. 命令格式: ...

  4. Activity四种启动模式

    转载博客:http://blog.csdn.net/shinay/article/details/7898492 Activity启动方式有四种,分别是:standardsingleTopsingle ...

  5. Javascript中关键参数this浅析

    自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底 ...

  6. 前端编码风格规范之 JavaScript 规范

    JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...

  7. 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...

  8. MySQL密码忘记，怎么办？

    如果哪天你忘记了线上MySQL数据库的root密码,怎么办? 大家往往会想到skip-grant-tables参数,具体步骤如下: 1. 关闭MySQL数据库,因为root密码忘记了,mysqladm ...

  9. [c++] Templates

    Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...

  10. 使用RMAN创建复制数据库

    我的实验环境: - 源数据库A机: RHEL6.4 + Oracle 11.2.0.4 IP地址:192.168.99.159 db_name=oradb 数据库已正常运行 - 复制数据库B机: RH ...