jquery复选框点击checkbox添加或删除text输入框value值



224 893 298



特效描述:复选框点击 添加或删除 输入框value值,利用复选框的点击时候的状态向text添加或删除数据  . 原创分享!

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script src="js/jQuery.js"></script>
<script src="js/jquery.artDialog.js?skin=idialog"></script>

3. HTML代码

<div class="span12 content">
	<div class="box">
		<div class="box-head">
			<h3>邮件编写</h3>
		</div>
		<div class="box-content">
			<div class="form-horizontal">
				<div class="control-group">
					<label class="control-label">收件人</label>
					<div class="controls">
						<div class="input-append">
							<input type="text" id="jsrtxt" class="tip" />
							<span class="tip add-on"  id="jieshouren" data-original-title="点击选择联系人" >
								<i class="icon-user" style="cursor:pointer" ></i>
								<div style="display:none" id="selectlxr"></div>
							</span>
						</div>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">主题</label>
					<div class="controls">
						<input type="text" class="span6 input-square" />
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">内容</label>
					<div class="controls">
						<textarea class="span6 input-square"></textarea>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">&nbsp;</label>
					<div class="controls">
						<input type="button" class="btn btn-fo" value="提交发送" />
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--js结束-->
<script>
//循环输出创建十个复选框
var chtml = "";
for (var i = 0; i < 10; i++) {
   chtml += "<div style='word-wrap:break-word; width:450px; '>";
   chtml += '<label style="float:left;padding:15px"><input type="checkbox" name="aaa" value="1" class="{required:true}" /><span style="margin-left:10px">小'+i+'</span></label>';
   chtml += "</div>";
}
//把得到字符串利用jquery添加到元素里面生成checkbox
$("#selectlxr").html(chtml);
//创建一个 dialog弹出框(第三方插件有兴趣可以看下 超赞的一款插件 http://www.planeart.cn/demo/artDialog/) 把创建好的弹出框隐藏起来
var dia = $.dialog(
   {
	   title: "选择联系人", width: "500px",
	   content: $("#selectlxr").html(),
	   close: function () {
		   this.hide();
		   return false;
	   },
	   follow: document.getElementById("jieshouren")
   }
   ).hide();
//点击 显示
$("#jieshouren").click(function () {
   dia.show();
})
//事件 获取checkbox点击时候的父元素的值 添加到text 如果点击收的选中状态为checked 则添加 否则 删除
$("input[type=checkbox]").click(function () {
   try {
	   if ($(this).attr("checked")) {
		   $("#jsrtxt").val($("#jsrtxt").val() + $(this).parent().text() + ";");
	   } else {
		   $("#jsrtxt").val($("#jsrtxt").val().replace($(this).parent().text() + ';', ""));
	   }
   } catch (e) {
	   $("#jsrtxt").val("");
   }
})
//初步测试 暂无小bug 可以为text增加一个只读  
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 切换按钮 form表单 提示框/弹出层 文本框 value赋值 表单提交 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到