-
2021-10-13 17:00:34
选中传1,未选中传0的情况。
// Html部分示例 <el-checkbox label="XXXXX" v-model="form.XXXXX" :checked="form.XXXXX == 1 ? true : false" true-label="1" false-label="0" ></el-checkbox> // JS部分示例 data() { return { form:{ XXXXX: "0", } } } methods:{ test(){ let data = this.form // 然后利用AJAX将data传到后端就可以了。 } }
更多相关内容 -
Jquery实现的双Select框多选表单提交
2019-03-17 01:36:17NULL 博文链接:https://maskainv.iteye.com/blog/547672 -
react-responsive-select:可自定义,可触摸的React select多选表单控件。 内置键盘和屏幕阅读器可访问性
2021-05-04 16:21:37可自定义,可触摸的React单选/多选表单控件。 考虑到键盘和屏幕阅读器的可访问性而构建。 特征 单选和多选模式 可访问的WAI ARIA合规性 触摸友好 键盘友好 跨平台的类似交互体验 自定义标签渲染 自定义选项标记 ... -
table表单多选js
2021-06-13 13:09:33var temp_str = '';var chose_arr = new Array();function get_true_length(arr) {var num = 0for (val in arr) {if (val != "false") {num++}}return num}function chose(e) {if (temp_str == '') {var str = $(e)....var temp_str = '';
var chose_arr = new Array();
function get_true_length(arr) {
var num = 0
for (val in arr) {
if (val != "false") {
num++
}
}
return num
}
function chose(e) {
if (temp_str == '') {
var str = $(e).attr('id');
temp_str = str.substr(0, 7)
chose_one(e);
} else {
var str = $(e).attr('id');
var sub_str = str.substr(0, 7)
if (sub_str == temp_str) {
chose_one(e);
} else {
$("td[id^=" + temp_str + "]").each(function(ee) {
chose_arr = new Array()
$("#caozuo_date").html('');
$(this).attr('style', "border: 1px solid #ABABAB;")
})
temp_str = sub_str
chose_one(e);
}
}
}
function chose_one(e) {
var date = $(e).attr('date');
var str = $(e).attr('id');
var ind = str.split('_')
if ($(e).css('border-width') == "3px") {
// chose_arr.remove(ind[2]); // 删除元素
chose_arr.splice(ind[2], 1); // 删除元素
$(e).attr('style', "border: 1px solid #ABABAB;")
} else {
chose_arr[ind[2]] = date;
$(e).attr('style', "border: 3px solid #93CED3;")
}
// console.log(chose_arr)
// console.log(get_true_length(chose_arr))
var old_str = $("#caozuo_date").html()
var date_all = ''
if (old_str == '') {
date_all = date
} else {
var old_arr = old_str.split('~')
if (!(typeof(old_arr[1]) == "undefined")) {
if (date > old_arr[1]) {
date_all = old_arr[0] + '~' + date
} else if (date < old_arr[0]) {
date_all = date + '~' + old_arr[1]
} else {
date_all = old_str
}
} else {
old_str = old_arr[0]
if (old_str < date) {
date_all = old_str + '~' + date
} else {
date_all = date + '~' + old_str
}
}
}
$("#caozuo_date").html(date_all);
$("#caozuo_days").html(get_true_length(chose_arr));
$('#chose').show();
}
$(function() {
$("input").attr("disabled", "true")
$('td').each(function() {
$(this).click(function() {
chose(this)
})
})
})
-
layui前端,弹窗多选表单,选择后自动添加到主表单,附带状态判断、除重、单行删除功能
2021-01-15 16:57:35layui前端,弹窗多选表单,选择后自动添加到主表单,附带状态判断、除重、单行删除功能 实现效果如下: 点击选择,弹出弹窗 选择需要的数据后,主表格自动添加 除重 状态判断 主要前端代码如下: HTML: <...layui前端,弹窗多选表单,选择后自动添加到主表单,附带状态判断、除重、单行删除功能
实现效果如下:
点击选择,弹出弹窗
选择需要的数据后,主表格自动添加
除重
状态判断
主要前端代码如下:
HTML:
<div> <table class="layui-table" lay-filter="main_table" id="choosetable" > <thead> <tr> <div class="layui-btn-container"> <a class="layui-btn layui-btn-sm" id="choose" name="choose" > <i class="layui-icon">选择</i> </a> </div> </tr> <tr> <th >操作</th> <th >资产单号</th> <th>资产编码</th> <th >资产名称</th> <th >资产类别</th> <th >资产来源</th> <th >资产所在位置</th> <th >价格</th> </tr> <tr th:each="perii,lstati:${assetList}"><!--Thymeleaf 的循环渲染表格(数据从后端传入--> <td ><input type='button' value='删除' class='layui-btn' onclick='delLine11(this)'/></td> <td><input readonly="readonly" style="border:none;" type="text" name="tid" th:value="${perii.tid}"></td> <td th:text="${perii.labelId}">资产编码</td> <td th:text="${perii.assetName}">资产名称</td> <td th:text="${perii.assetTypeName}">资产类别</td> <td th:text="${perii.assetSourceName}">资产来源</td> <td th:text="${perii.assetPositionName}">资产所在位置</td> <td th:text="${perii.price}">价格</td> </tr> </thead> </table></div>
js:
<script> //资产选择器 layui.tableSelect.render({ elem : '#choose', //定义输入框input对象 searchKey : 'search_LIKE_use_status', //搜索输入框的name值 默认keyword table : { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem height : 220, url : '[[@{/amc/asset/queryList}]]', cols : [ [ { checkbox : true }, { field : 'tid', title : 'tid', width : 0 }, { field : 'labelId', title : '资产编号', width : 100 },{ field : 'useStatus', title : '资产状态', width : 100 },{ field : 'assetName', title : '资产名称', width : 100 },{ field : 'createdTime', title : '购买时间', width : 100 },{ field : 'usePeriod', title : '使用期限', width : 100 },{ field : 'assetTypeName', title : '资产类别', width : 100 },{ field : 'assetSourceName', title : '资产来源', width : 100 },{ field : 'assetPositionName', title : '资产所在位置', width : 100 }, { field : 'price', title : '价格', width : 100 }] ] }, done : function(elem, data) { var tr = $("#choosetable tr"); // 获取table中每一行内容 var result =new Array();; // 数组 for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容 var tds = $(tr[i]).find("td"); if (tds.length > 0) { result.push({ "tid" : $(tds[1]).find("input").val() }) } } console.log("^^^^^^^^^^^^^^^^"+JSON.stringify(result)); //选择完后的回调,包含2个返回值 elem:返回之前input对象;data:表格返回的选中的数据 [] //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID... choosetable if (data.data.length > 0) { var elementById = data.data[0]; console.log(elementById); for(var i=0; i<data.data.length;i++){ var tid=data.data[i].tid; var labelId=data.data[i].labelId; var assetName=data.data[i].assetName; var assetTypeName=data.data[i].assetTypeName; var assetSourceName=data.data[i].assetSourceName; var assetPositionName=data.data[i].assetPositionName; var price=data.data[i].price; var useStatus = data.data[i].useStatus; if (result.length == 0) { if (useStatus == "已使用") { var tr = document.createElement("tr"); tr.innerHTML = "<tr>" + "<td class='c6'><input class='layui-btn' type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>" + "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='tid' value='" + tid + "'></td>" + "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='labelId' value='" + labelId + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetName' value='" + assetName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetTypeName' value='" + assetTypeName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetSourceName' value='" + assetSourceName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetPositionName' value='" + assetPositionName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='price' value='" + price + "'></td>" + "</tr>"; // 添加数据到表中 document.getElementById("choosetable").appendChild(tr); } else { layui.layer.msg("只能选择已使用状态的资产,请重新选择"); } } else { // 除重 var bb = true; for (var a = 0; a < result.length; a++) { console.log("^^^^^^^for^^^^^^^^"); if (tid == result[a].tid) { bb = false; break } else { } } if (bb == true) { if (useStatus == "已使用") { var tr = document.createElement("tr"); tr.innerHTML = "<tr>" + "<td class='c6'><input class='layui-btn' type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>" + "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='tid' value='" + tid + "'></td>" + "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='labelId' value='" + labelId + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetName' value='" + assetName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetTypeName' value='" + assetTypeName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetSourceName' value='" + assetSourceName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetPositionName' value='" + assetPositionName + "'></td>" + "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='price' value='" + price + "'></td>" + "</tr>"; // 添加数据到表中 document.getElementById("choosetable").appendChild(tr); } else { layui.layer.msg("只能选择已使用状态的资产,请重新选择"); } }else { layui.layer.msg("重复资产,请重新选择"); } // 除重 } } } else { elem.val(''); $('#userInCompanyTid').val(''); } } }); //表格单行删除(用于弹窗中被选中的数据,在主表格中删除 function delLine(obj){ var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象 document.getElementById("choosetable").removeChild(tr); } //表格单行删除(用于后端传回在主表格中渲染的数据,在主表格中删除 function delLine11(obj){ var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象 document.getElementById("choosetable").deleteRow(tr.rowIndex); }
-
JavaScript案例----表单多选与反选
2022-04-19 10:32:55<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #form01{ padding:100px; background-color: pink;... //入口函数,防...<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #form01{ padding:100px; background-color: pink; } </style> <script type="text/javascript"> //入口函数,防止页面上的标签还没被渲染出来,JS的代码就出来了 window.onload=function(){ let items=document.getElementsByName("items"); let allselectcheck=document.getElementById("checkallbox"); let allselect=document.getElementById("checkboxyes"); let allnosel=document.getElementById('checkboxno'); let antiselect=document.getElementById('checkboxanti'); let submit=document.getElementById('submit'); allselect.onclick=function(){//全选 for (var i = 0; i < items.length; i++) { items[i].checked=true; } allselectcheck.checked=true; }; allnosel.onclick=function(){//全不选 for (var i = 0; i < items.length; i++) { items[i].checked=false; } allselectcheck.checked=false; }; antiselect.onclick=function(){//反选 for (var i = 0; i < items.length; i++) { if(items[i].checked)//如果被选中 items[i].checked=!items[i].checked;//取反 } if(allselectcheck.checked)//如果全部被选中,则全部取反 allselectcheck.checked=!allselectcheck.checked; }; submit.onclick=function(){//提交弹出框 for (var i = 0; i < items.length; i++) { if(items[i].checked) alert(items[i].value);//弹出选中的值 } }; allselectcheck.onclick=function(){ for (var i = 0; i < items.length; i++) { items[i].checked=allselectcheck.checked; } }; //当只有一个没被选中时,点击,全选框被选中,反之当全部选中,取消一个,全不选被选中 for (var i = 0; i < items.length; i++) { items[i].onclick=function(){ allselectcheck.checked=true; for (var j = 0; j < items.length; j++) { if(!items[j].checked){//循环哪一个没被选中 allselectcheck.checked=false; break; } } } }; } </script> </head> <body> <div id="form01"> <form action="" method="post"> 你的hobby是:<input type="checkbox" name="" id="checkallbox" value="" />全选/全不选 <br /> <input type="checkbox" name="items" id="" value="EXO" />EXO <input type="checkbox" name="items" id="" value="boy" />boy <input type="checkbox" name="items" id="" value="sports" />sports <input type="checkbox" name="items" id="" value="eat" />eat <input type="checkbox" name="items" id="" value="study" />study <br> <input type="button" name="" id="checkboxyes" value="全选" /> <input type="button" name="" id="checkboxno" value="全不选" /> <input type="button" name="" id="checkboxanti" value="反选" /> <input type="button" name="" id="submit" value="提交" /> </form> </div> </body> </html>
效果演示:
单选框多选框
-
jsp中request.getParameter获取多选表单为null
2021-09-29 00:11:23jsp中request.getParameter获取多选表单CHECKBOX为null 就是不选的话,就显示为null,怎么才能将这个null去除 -
js 判断判断多选表单checkbox
2019-10-02 08:01:35html代码 <input type="checkbox" class="ace auth_id" name="ckb[]" value="{!! $item->id !!}"/> ...input type="checkbox" class="ace auth_id" name="ckb[]" ..............input ... -
js获取checkbox多选表单
2015-12-23 12:16:00obj = document.getElementsByName("test"); check_val = []; for(k in obj){ if(obj[k].checked) check_val.push(obj[k].value); } alert(check_val); 非常有用的函数 ... -
ReactJS实现表单的单选多选和反选的示例
2020-10-19 02:58:19本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例,非常具有实用价值,需要的朋友可以参考下 -
js表单处理中单选、多选、选择框值的获取及表单的序列化
2020-11-22 00:44:53本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 ... -
php表单多选框
2021-04-09 13:13:141.更改指定的数组记录假设按钮标识是action=edit当用户选中0个或多个复选框,然后提交表单。相应的id会一起提交过去。更改记录的id号有了, 然后直接覆盖 下标对应的数组, 修改完成。2.删除指定的数组记录假设按钮... -
PHP表单提交之复选框
2017-04-09 14:52:47PHP表单提交--之复选框 -
js DOM练习,做一个单选多选全选的form表单
2021-01-17 21:47:21看效果图 注意其中可能出现的几个bug 1.点击全选单选框后也应该全选,取消选择其余四个也应该取消选择 2.点击全选多选框以后,正常情况下四个都选中,取消一个选中,多选框也应该取消选中 ... 2.上代码 ... -
el-select multiple 选择器多选控件,初始就会触发表单校验的问题
2022-05-19 15:29:45<el-select v-if="NextPoint.success" v-model="submitForm.messageReceiver" style="width: 50%" filterable multiple > 因为后端需要的下一步执行人为字符串 ...结果打开页面就触发了表单验证 ... -
关于JQuery Moblie多选表单提交时PHP接收的处理方法
2016-01-09 23:30:53由于JQuery Moblie这货在表单提交的时候默认使用了Ajax,所以在PHP后台每次都只能接收到多选表单选择的最后一项数据。所以说解决方法是什么呢?当然是禁止Ajax啊,可以在from标签中添加data-ajax=”false” 标签即可... -
Ant design-05 表单多选的组件
2021-12-30 10:31:31本节:多选功能的表单 table主要加的内容: 1.<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" /> 2.在... -
php处理单名多值表单的方法(多选下拉框)
2021-05-08 00:56:52php处理单名多值表单的方法(多选下拉框)发布于 2014-11-15 09:33:40 | 911 次阅读 | 评论: 0 | 来源: 网友投递PHP开源脚本语言PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本... -
万能表单8.1.5 皮肤管理 单选多选
2020-09-23 16:36:31万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选 -
(精华)layui多选下拉框(select多选框),赋值,取值,结合表单提交等详细案例(含源码)
2021-03-19 17:25:27select多选框,下拉多选框,(整理方便下次使用) 源码地址(可在线修改体验代码) http://www.shagua.wiki/project/3?p=125 -
jquery验证表单中的单选与多选实例
2020-10-26 23:49:34里所说的,用jquery去验证某一组多选至少要有一个选中,某一组单选至少有一个选中,,大家都知道单一的一个用js比较好验证,但是想要用jquery的验证并且用到jquery验证的提示信息,那么这就不好办了 -
表单校验时,使用el-select multiple 下拉多选控件,一进页面就会触发表单校验问题解决
2021-12-17 14:22:49在我设置必填后,一进页面就提示了 后来发现 改字段绑定的属性 需为一个空数组即可解决 原文链接:原文 -
6个Web前端纯CSS3实现的单多选选择框(三)
2014-08-13 14:24:03在线效果:http://ynif.v099.10000net.cn/demo/checkbox/3/checkbox/index.html -
vue 表单渲染操作之单元格多选,数据data的长度不确定,data的item的长度也不确定。
2021-05-27 09:47:27vue 表单操作之单元格多选。 项目需求根据商家数据,展示内容,实现单元格多选,商家数据data的长度不确定,data的item的长度也不确定。 ps:样式没有写有点丑,可根据自己需求写样式。 <table> <thead&... -
iview中Select 下拉框 多选 校验方法
2020-10-21 16:39:13<FormItem label="学科:" prop="teachingCourse"> <Select v-model="formData.teachingCourse" clearable multiple placeholder="选择教授的学科" > <Option v-for="it -
vue el-select multiple 下拉多选控件,一打开页面就会触发表单校验问题
2022-01-07 10:20:28问题描述:form表单中使用 el-select multiple 下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如下图: 预期效果是:打开页面,机构和其他属性一样,不会自动触发表单非空... -
vue element-ui select 多选验证不通过问题处理
2022-04-21 18:27:23vue elemnt ui select 多选验证不通过 -
element ui里dialog关闭后清除验证条件方法
2020-08-27 23:37:15下面小编就为大家分享一篇element ui里dialog关闭后清除验证条件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧