体验效果：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. WCF学习之旅——第一个WCF示例（一）

    最近需要用到WCF,所以对WCF进行了解.在实践中学习新知识是最快的,接下来先做了一个简单的WCF服用应用示例. 本文的WCF服务应用功能很简单,却涵盖了一个完整WCF应用的基本结构.希望本文能对那些 ...

  2. 日志log2

    public class LoggerHelper2 { private static ConcurrentQueue<string> CqMsg = null; private stat ...

  3. 深入学习jQuery样式操作

    × 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...

  4. 4、解析配置文件 redis.conf、Redis持久化RDB、Redis的主从复制

    1.Units单位 配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit 对大小写不敏感 2.INCLUDES包含 和我们的Struts2配置文件类似,可以通过includes包 ...

  5. linux安装和配置 mysql、redis 过程中遇到的问题记录

    linux下部署mysql和redis网上的教程很多,这里记录一下我部署.配置的过程中遇到的一些问题和解决办法. mysql ①安装完成后启动的时候报错 Starting MySQL.The serv ...

  6. mysqldump的实现原理

    对于MySQL的备份,可分为以下两种: 1. 冷备 2. 热备 其中,冷备,顾名思义,就是将数据库关掉,利用操作系统命令拷贝数据库相关文件.而热备指的是在线热备,即在不关闭数据库的情况下,对数据库进行 ...

  7. c# 实现简单udp数据的发送和接收

    服务端代码 static void Main(string[] args) { UdpClient client = null; string receiveString = null; byte[] ...

  8. Cesium应用篇：3控件（2）BaseLayerPicker

    所有范例均在github中搜索:ExamplesforCesium BaseLayerPicker控件非常简单,似乎没什么可说的,确实非常的简单,但作为一个底图选择控件,可以说是最基本的一个控件. C ...

  9. Kooboo CMS - @Html.FrontHtml().Meta()详解。

    下面是代码: public virtual IHtmlString Meta() { AggregateHtmlString htmlStrings = new AggregateHtmlString ...

  10. HandlerThread 创建一个异步的后台线程

    使用HandlerThread几大优点: 1.制作一个后台异步线程,需要的时候就可以丢一个任务给它,使用比较灵活; 2.Android系统提供的,使用简单方便,内部自己封装了Looper+Handle ...