体验效果：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. volatile用法

    1.volatile 主要是 其 "可见性",在java内存模型中,变量都是放在主内存中,每条线程里面有自己的工作内存,当一个变量被volatile 修饰时候,其他的线程会得到该变 ...

  2. Java的学习之路

    记事本 EditPlus eclipse Java的学习软件,已经系统性学习Java有一段时间了,接下来我想讲一下我在Java学习用到的软件. 1.第一个软件:记事本 记事本是Java学习中最基础的编 ...

  3. atitit.闭包的概念与理解attilax总结v2 qb18.doc

    atitit.闭包的概念与理解attilax总结v2 qb18.doc 1.1. 闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.1 2. #---- ...

  4. WaitType：ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  5. Sql Server系列：排序函数

    在SQL Server中有4个排序函数:ROW_NUMBER().RANK().DENSE_RANK()及NTILE()函数. 1. ROW_NUMBER()函数 ROW_NUMBER()函数为每条记 ...

  6. .Net 转战 Android 4.4 日常笔记（3）--目录结构分析

    看了创建项目后,出现的文件夹很多确实有点晕,不过经过简单的了解还是跟我们asp.net的目录有点相识滴. 下面这张图,概括了主要的文件用途.其实也只需要了解这几个就差不多了,知道在那里设计界面,那里写 ...

  7. Notes:DOM的事件模拟

    首先使用document对象的createEvent方法创建一个事件对象,然后初始化该事件对象,接着使用支持事件DOM节点的dispatchEvent方法触发事件. DOM2级事件和DOM3级事件有些 ...

  8. iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调

    UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollecti ...

  9. 2014年百度之星程序设计大赛 - 初赛（第二轮）Chess

    题目描述:小度和小良最近又迷上了下棋.棋盘一共有N行M列,我们可以把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,“王”在棋盘上的走法遵循十字路线.也就是说,如果“王”当前在 ...

  10. C算法编程题系列

    我的编程开始(C) C算法编程题(一)扑克牌发牌 C算法编程题(二)正螺旋 C算法编程题(三)画表格 C算法编程题(四)上三角 C算法编程题(五)“E”的变换 C算法编程题(六)串的处理 C算法编程题 ...