jquery复选框多选赋值给文本框的方法

本文实例讲述了jquery复选框多选赋值给文本框的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jquery点击复选框触发事件给input赋值</title><base target="_blank" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery操作复选框(CheckBox)的取值赋值实现代码

    1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项: $('input:checkbox').each(function() { if ($(this).attr('c

  • JQuery 进入页面默认给已赋值的复选框打钩

    JQuery 进入页面默认给已赋值的复选框打钩

       效果: JQuery代码: $("#menuTree").find("div span").click(function () { currmenuid = this.id; var currmenuname = LoadCurrMenuName(); $('#authName').text(currmenuname); //默认给已赋值的菜单打钩 var rightvalue= AutoCheck(); var str = ""; var

  • jquery实现勾选复选框触发事件给input赋值

    代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <style type="text/css"> * { marg

  • jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

    本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti

  • jquery复选框多选赋值给文本框的方法

    本文实例讲述了jquery复选框多选赋值给文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>jquery点击复选框触发事件给input赋值</title><base target="_blank" />  <m

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

  • JS实现下拉菜单赋值到文本框的方法

    JS实现下拉菜单赋值到文本框的方法

    本文实例讲述了JS实现下拉菜单赋值到文本框的方法.分享给大家供大家参考.具体如下: 这里演示下拉菜单和文本框构建的介绍栏,将Select框中的值定位到INPUT文本输入框中,是下拉框赋值到文本框的实例,上网时候貌似经常见的功能,只是不知如何形容,或许叫做联动吧. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-to-input-val-codes/ 具体代码如下: <html> <head> <SCRIP

  • jquery实现点击label的同时触发文本框点击事件的方法

    本文实例讲述了jquery实现点击label的同时触发文本框点击事件的方法.分享给大家供大家参考.具体实现方法如下: var labelID; $('label').click(function() { labelID = $(this).attr('for'); $('#'+labelID).trigger('click'); }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery实现鼠标单击网页文字后在文本框显示的方法

    本文实例讲述了jQuery实现鼠标单击网页文字后在文本框显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • 当某个文本框成为焦点时即清除文本框内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>成为焦点时清除文本框内容</title> <script> window.onload = initAll; function initAll(){ var clearText = document.getElementsByTagName("input

  • 文本框只能选择数据到文本框禁止手动输入

    今天在醒目中碰到了一个问题.文本框只能上人家选择数据进去.不能手动输入.查了资料.最后解决如下. 页面代码: 复制代码 代码如下: <asp:TextBox ID="txtcategory" readonly="true" Width="300" CssClass="txt" runat="server"></asp:TextBox> 脚本(在给文本框赋值的时候使用): 复制代码 代

  • 使用Jquery实现点击文字后变成文本框且可修改

    使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改. 1.点击文字变为文本框 2.文本框自动全选文字 3.对文本框内容进行修改 4.点击文本框以外的地方文本框再次变为修改后的文字 5.同步更新SQL数据库内容 Html部分代码 复制代码 代码如下: <table width="200"> <tr> <td><b>ID</b></td> <td><b>名称</b>&

随机推荐