【转载】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中点击行和点击复选框触发的事件是不一样的! 点 ...
随机推荐
- JS高级程序设计第三版——变量、作用域和内存问题
JavaScript变量: 由于JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可 ...
- DevExpress中 TreeList控件的常规配置
//以下为TreeList控件样式相关设置 this.treelist_SystemCfg.BackColor = Color.Transparent; this.treelist_SystemCfg ...
- mysql io过高
背景: 晚上,公司业务群里发信息说,有玩家在游戏里面赠送别人礼物后,赠送记录在20多分钟以后才出现,延时太高. 问题: 公司数据库使用mysql,配置了主从.配置的是,游戏程序写数据到主库,读数据到从 ...
- Java字符串工具类
import java.io.ByteArrayOutputStream;import java.io.UnsupportedEncodingException;import java.lang.re ...
- htm5 手机自适应问题 文本框被激活(获取焦点)时,页面会放大至原来尺寸。
加上这句话就ok啦 <meta name="viewport" content="width=device-width, initial-scale=1.0, mi ...
- dedecms Ajax异步获取文章列表
dedecms如何通过ajax(异步)动态获取文章列表数据. 第一步添加:服务端(PHP)代码 打开plus目录下面的list.php文件,在12行代码下面添加以下代码: if(isset($_GET ...
- 巧用padding生成正方形DIV
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- stl sort使用不当造成崩溃
#include <iostream>#include <vector>#include <algorithm>using namespace std; bool ...
- MVVM的本质:视图逻辑处理、视图管理、视数中间层
MVVM的核心是将原来Controller中的视图逻辑.视图管理.视数中间层的功能剥离出来,形成单独的模块: 大部分功能与视图相关.少部分与数据相关: 视图逻辑和业务逻辑不通: 解决的问题:UIVie ...
- BZOJ2005:[NOI2010]能量采集(莫比乌斯反演,欧拉函数)
Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种得 ...