【转载】jquery实现勾选复选框触发事件给input赋值+回显复选框
引用:https://blog.csdn.net/rui276933335/article/details/45717461
JSP:
<td class="as1">
<input type="checkbox" name="gdzc" value="1" id="t0" class="az"/><label for="t0" class="as">商品房</label>
<input type="checkbox" name="gdzc" value="2" id="t1" class="az"/><label for="t1" class="as">土地</label>
<input type="checkbox" name="gdzc" value="3" id="t2" class="az"/><label for="t2" class="as">厂房</label>
<input type="checkbox" name="gdzc" value="4" id="t3" class="az"/><label for="t3" class="as">企业产</label>
<input type="checkbox" name="gdzc" value="5" id="t4" class="az"/><label for="t4" class="as">底商</label>
<input type="checkbox" name="gdzc" value="6" id="t5" class="az"/><label for="t5" class="as">别墅</label>
<input type="checkbox" name="gdzc" value="7" id="t6" class="az"/><label for="t6" class="as">写字楼</label>
<input class="txtValue" type="hidden" type="text" id="qwer" name="com_fixed_assets" value="${application.com_fixed_assets}" />
</td>
JS复选框:
$(function(){
var count = 0;
$(".as1 :checkbox").click(function(){
var txtvalue = $(this).val();
if ($(".txtValue").val() == ""){
if ($(this).prop("checked") == true){
var txtalso = $.trim(txtvalue);
} else {
var txtalso = "";
}
}else {
if ($(this).prop("checked") == true){
var txtalso = $.trim($(".txtValue").val()) + "," + $.trim(txtvalue);
}
else {
var txtelse = $.trim($(".txtValue").val());
var txtnow = $.trim(txtvalue);
var reg1 = "," + txtnow;
var reg2 = txtnow + ",";
var reg3 = txtnow;
var txtelse = txtelse.replace(reg1, "").replace(reg2, "").replace(reg3, "");
var txtalso = txtelse;
}
}
$(".txtValue").val(txtalso);
count++;
});
});
JS回显:
$(function(){
//当页面加载完成的时候,自动调用该方法
window.onload=function(){
//获得所要回显的值
var checkeds = $("#qwer").val();
//拆分为字符串数组
var checkArray =checkeds.split(",");
//获得所有的复选框对象
var checkBoxAll = $("input[name='gdzc']");
//获得所有复选框的value值,然后,用checkArray中的值和他们比较,如果有,则说明该复选框被选中
for(var i=0;i<checkArray.length;i++){
//获取所有复选框对象的value属性,然后,用checkArray[i]和他们匹配,如果有,则说明他应被选中
$.each(checkBoxAll,function(j,checkbox){
//获取复选框的value属性
var checkValue=$(checkbox).val();
if(checkArray[i]==checkValue){
$(checkbox).prop("checked",true);
}
})
}
}
【转载】jquery实现勾选复选框触发事件给input赋值+回显复选框的更多相关文章
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
- thymeleaf单选回显,多选回显,选回显,下拉默认选中第一个
//默认选中第一个<input type ="radio" name="repaymentType" th:each ="repaymentTy ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...
- jquery接收后台数组或集合回显复选框
公司使用的框架比较旧,没有使用el等表达式.如果后台传递的是数组,需要把数组转为以逗号分隔的字符串. <% String context = request.getContextPath(); ...
- jquery点击div以外的区域触发事件
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 关于select下拉框选择触发事件
最开始使用onclick设置下拉框触发事件发现会有一些问题: <select> <option value="0" onclick="func0()&q ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Thymeleaf+layui+jquery复选框回显
一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...
- easyui 复选框 onClickRow事件与onSelect事件与onCheck事件
在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点 ...
随机推荐
- 用opencv做的静态图片人脸识别
这次给大家分享一个图像识别方面的小项目,主要功能是识别图像中的人脸并根据人脸在图片库找出同一个与它最相似的图片,也就是辨别不同的人. 环境:VS2013+opencv2.4.13 主要是算法:open ...
- B+/-Tree原理(mysql索引数据结构)
B+/-Tree原理 B-Tree介绍 B-Tree是一种多路搜索树(并不是二叉的): 1.定义任意非叶子结点最多只有M个儿子:且M>2: 2.根结点的儿子数为[2, M ...
- c# 依赖注入之---setterInjection(转)
图3.1 Setter注入示意 定义一个接口: namespace SetterInjection { internal interface IServiceClass { string Servic ...
- classifier.cc-recv() [ns2.35]
//without comments int chooseECNSlot() { ; ;i<=nslot_;i++) { *count) { *count); )*ti; ;j<=nslo ...
- Day01——Python简介
一.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...
- python全栈学习笔记(三)网络基础之网络设备及架构介绍
- Python学习---Python下[set集合]的学习
Set集合[可变]是一个无序的,不重复的数据组合,它的主要作用如下: 1. 去重,把一个列表变成集合,就自动去重了 2. 关系测试,测试两组数据之前的交集.差集.并集等关系 集合(set):把不同的元 ...
- 索引反向使用案例,加index_desc hint
drop index idx_t;create index idx_t on t(owner desc,object_type asc); select /*+index(a,idx_t)*/ * f ...
- dailiaojie new
http://imushan.com/categories/Java/ 编译优化手段.
- zt C++标准库set类型
C++标准库set类型 分类: C++编程语言 2012-11-06 10:53 909人阅读 评论(0) 收藏 举报 目录(?)[-] 在set中添加元素 从set中获取元素 set容器只是单纯的键 ...