无为清净楼资源网 Design By www.qnjia.com

本文实例讲述了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="/UploadFiles/2021-04-02/jquery-1.11.2.min.js"> <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程序设计有所帮助。

标签:
jquery,复选框,多选,赋值,文本框,方法

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?