精华内容
下载资源
问答
  • 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传到后端就可以了。
               }
             }
    
    更多相关内容
  • NULL 博文链接:https://maskainv.iteye.com/blog/547672
  • 可自定义,可触摸的React单选/多选表单控件。 考虑到键盘和屏幕阅读器的可访问性而构建。 特征 单选和多选模式 可访问的WAI ARIA合规性 触摸友好 键盘友好 跨平台的类似交互体验 自定义标签渲染 自定义选项标记 ...
  • table表单多选js

    2021-06-13 13:09:33
    var 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前端,弹窗多选表单,选择后自动添加到主表单,附带状态判断、除重、单行删除功能 实现效果如下: 点击选择,弹出弹窗 选择需要的数据后,主表格自动添加 除重 状态判断 主要前端代码如下: 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);
        }
    
    展开全文
  • <!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获取多选表单CHECKBOX为null 就是不选的话,就显示为null,怎么才能将这个null去除
  • html代码 <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:00
    obj = document.getElementsByName("test"); check_val = []; for(k in obj){ if(obj[k].checked) check_val.push(obj[k].value); } alert(check_val); 非常有用的函数 ...
  • 本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例,非常具有实用价值,需要的朋友可以参考下
  • 本文总结了下在表单处理中单选、多选、选择框值的获取及表单的序列化,写成了一个对象。如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 ...
  • php表单多选框

    2021-04-09 13:13:14
    1.更改指定的数组记录假设按钮标识是action=edit当用户选中0个或多个复选框,然后提交表单。相应的id会一起提交过去。更改记录的id号有了, 然后直接覆盖 下标对应的数组, 修改完成。2.删除指定的数组记录假设按钮...
  • PHP表单提交之复选框

    2017-04-09 14:52:47
    PHP表单提交--之复选框
  • 看效果图 注意其中可能出现的几个bug 1.点击全选单选框后也应该全选,取消选择其余四个也应该取消选择 2.点击全选多选框以后,正常情况下四个都选中,取消一个选中,多选框也应该取消选中 ... 2.上代码 ...
  • <el-select v-if="NextPoint.success" v-model="submitForm.messageReceiver" style="width: 50%" filterable multiple > 因为后端需要的下一步执行人为字符串 ...结果打开页面就触发了表单验证 ...
  • 由于JQuery Moblie这货在表单提交的时候默认使用了Ajax,所以在PHP后台每次都只能接收到多选表单选择的最后一项数据。所以说解决方法是什么呢?当然是禁止Ajax啊,可以在from标签中添加data-ajax=”false” 标签即可...
  • 本节:多选功能的表单 table主要加的内容: 1.<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" /> 2.在...
  • php处理单名多值表单的方法(多选下拉框)发布于 2014-11-15 09:33:40 | 911 次阅读 | 评论: 0 | 来源: 网友投递PHP开源脚本语言PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本...
  • 万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选万能表单8.1.5 皮肤管理 单选多选
  • select多选框,下拉多选框,(整理方便下次使用) 源码地址(可在线修改体验代码) http://www.shagua.wiki/project/3?p=125
  • 里所说的,用jquery去验证某一组多选至少要有一个选中,某一组单选至少有一个选中,,大家都知道单一的一个用js比较好验证,但是想要用jquery的验证并且用到jquery验证的提示信息,那么这就不好办了
  • 在我设置必填后,一进页面就提示了 后来发现 改字段绑定的属性 需为一个空数组即可解决 原文链接:原文
  • 在线效果:http://ynif.v099.10000net.cn/demo/checkbox/3/checkbox/index.html
  • vue 表单操作之单元格多选。 项目需求根据商家数据,展示内容,实现单元格多选,商家数据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
  • 问题描述:form表单中使用 el-select multiple 下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如下图: 预期效果是:打开页面,机构和其他属性一样,不会自动触发表单非空...
  • vue elemnt ui select 多选验证不通过
  • 下面小编就为大家分享一篇element ui里dialog关闭后清除验证条件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,029
精华内容 13,211
关键字:

多选表单

友情链接: IMEI_FLASHABLE.zip