美文网首页
动态控制复选框(checkbox和radio)

动态控制复选框(checkbox和radio)

作者: 愤怒的_菜鸟 | 来源:发表于2018-09-27 15:38 被阅读17次

实现的效果是共用一个页面(添加和修改),默认为checkbox
添加为checkbox,修改为radio
前端页面展示如下

<tr class="roleList">
                    <th>
                        管理角色: 
                    </th>
                    <td>
                        <#assign roleSet = (admin.roleSet)! />                      
                            <#list allRoleList as role>
                                    <label>
                                        <input type="checkbox" name="roleList.id" id="rolest" value="${role.id}"<#if (roleSet.contains(role))!> checked</#if> />${role.name}
                                    </label>
                            </#list>
                            <label class="requireField">*</label>                                               
                    </td>
                </tr>
function add(){     
            localStorage.isUpdate = "false";
            location.href='team_data!add.action';
            
        }
        function update(){
            var s = $("#infoMarket").datagrid('getSelections');
            if(s == null || s == "") {
                return $.messager.alert("提示", "必须选中一行");
            } else if(s.length > 1) {
                return $.messager.alert("提示", "操作错误,只能选中一行");
            }
            var keyid = $("#infoMarket").datagrid('getSelections')[0].keyid;
            localStorage.isUpdate = "true";     
            location.href="team_data!edit.action?id="+keyid;
            

        }

js控制

if(localStorage.isUpdate=="true"){
        var id = document.getElementsByName('roleList.id');
                var value = new Array();
                for(var i = 0; i < id.length; i++){
                id[i].type="radio";
                }
        }else{
            var id = document.getElementsByName('roleList.id');
            var value = new Array();
            for(var i = 0; i < id.length; i++){
            id[i].type="checkbox";
            }           
        }

设置一个全局变量,点击页面通过修改type来控制复选框的状态
获取复选框的值

var id = document.getElementsByName('roleList.id');
     var value="";
     for(var i = 0; i < id.length; i++){
      if(id[i].checked)
      //value.push(id[i].value);
      value+=id[i].value+",";
     }
     value=value.substring(0,value.length-1);

相关文章

网友评论

      本文标题:动态控制复选框(checkbox和radio)

      本文链接:https://www.haomeiwen.com/subject/ieueoftx.html