美文网首页
动态控制复选框(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