体验效果：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. VMWare vSphere Client 克隆虚拟机 更改IP

    克隆虚拟机后,查看该虚拟机所分配的MAC地址. 打开控制台,进入linux界面. 打开/etc/udev/rules.d/70-persistent-net.rules内容如下面例子所示: # vi ...

  2. 由ArcMap属性字段自增引出字段计算器使用Python的技巧

    1.前言       前些日子有人问我ArcMap中要让某个字段的值实现自增有什么方法?我首先想到像SQL Server中对于数值型字段可以设置自增.所以我打开ArcCatalog查看发现只提供默认值 ...

  3. Use Qt in Debian for OpenCASCADE

    Use Qt in Debian for OpenCASCADE eryar@163.com Recently several OpenCASCADE enthusiasts want to buil ...

  4. android帧动画,移动位置,缩放,改变透明度等动画讲解

    1.苦逼的需求又来了,需要实现一些动画效果,第一个想到的是播放gif图片,但是这样会占包的资源,并且清晰度不高,于是想着程序实现,自己用帧动画+缩放+移动+透明度 实现了一些想要的效果,这里跟大家分享 ...

  5. ASP.NET：在一般处理程序中通过 Session 保存验证码却无法显示图片？

    using System.Drawing; using System.Web; using System.Web.SessionState; /// <summary> /// Captc ...

  6. IOS开发之视图和视图控制器

    视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要的东西.在学习视图这一块的东西的时候,感觉和Java Swing中的Panel差不多.在UIKit框架中都有一 ...

  7. ASP.NET 字符编码的那些事

    ASP.NET 中的字符编码问题,一般会有两个场景: HTML 编码:一般是动态显示 HTML 字符或标签,写法是:HttpUtility.HtmlDecode(htmlString) 或 Html. ...

  8. C语言 第六章 多重循环练习

    一.循环输入 #include "stdio.h" void main() { char c; do { printf("我告诉你1+1=2\n"); prin ...

  9. 利用Eclipse使用Java OpenCV（Using OpenCV Java with Eclipse）

    最近在上计算机视觉这门课程用到了OpenCV,于是找到了"Using OpenCV Java with Eclipse"这篇博文,是英文的,我将它翻译如下与大家分享 正文: 从2. ...

  10. BroadcastReceiver注册、使用及其权限

    首先声明一个类,此类继承自BroadcastReceiver类,处理Android当中发出的广播事件: public class SMSReceiver extends BroadcastReceiv ...