如何实现点击单选按钮，隐藏下拉框？

Question

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    <title>森林防护安检信息系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" /><script type="text/javascript">
// 搜索框查询事件
function doSearch(value, name) {
alert(value+":"+name)
$("#ptList").datagrid("options").queryParams = {
tfName : name,
tfValue : value
};
$("#ptList").datagrid("reload");
}
// 远程加载渲染完毕后执行方法。
$.parser.onComplete = function() {
// 添加按钮事件
$("#addUser").bind("click", function() {
$("#UserWin").window("setTitle","添加林场分类");
$("#UserWin").window("open");
});
// 取消按钮事件
$("#noUser").bind("click", function() {
$("#UserWin").window("close");
});
//修改按钮事件
$("#updateUser").bind("click", function() {
// 修改窗口标题
$("#UserWin").window("setTitle","修改林场分类");
// 获取当前选择行，如果为空则提示
var column = $("#ptList").datagrid("getSelected");
if(column){
    $("#uidVDB").attr("value",column.uid);
    $("#tfckbox").combobox("select",column["treeFarm"].tfid);
$("#loginNameVDB").attr("value",column.loginName);
$("#realNameVDB").attr("value",column.realName);
$("#telephoneVDB").attr("value",column.telephone);
$("#hidePwd").attr("value",column.loginPwd);
$("#reVDB").attr("value",column.re);

// 去掉林场名称验证
$("#UserWin").window("open");
}else{
$.messager.alert('警告','请选择需要操作的数据!'); 
} 
});

//权限管理





       //删除按钮事件
$("#delUser").bind("click", function() {
var array = $("#ptList").datagrid("getSelections");
var idStr="";
for(var i=0; i<array.length; i++){
if(i!=array.length-1){
         idStr += array[i].uid+",";
        }else{
            idStr+= array[i].uid;
        } 
}
if(idStr == ""){
$.messager.alert("提示", "请选择要删除的记录！", "info");
}else {
$.messager.confirm("询问", "您是否要删除当前选中记录？", function(b) {
if(b){

// 执行删除的Ajax delete
jQuery.ajax({  
        type:"post",  
        url:"./user/delete.do?idStr="+idStr,  
        success: function aa(data) { 
         // 刷新当前数据窗格
$("#ptList").datagrid("reload");
        }
    });
    }
});
}
});
// 保存按钮事件
$("#saveUser").bind("click", function() {
$("#UserForm").form("submit", {
url : "user/saveOrAdd.do",
onSubmit : function() {
var isValid = $(this).form('validate');
if (!isValid) {
$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success : function(data) {
var data = eval('(' + data + ')'); // 将返回信息转换为JSON格式。  
$.messager.alert("系统消息", data.message);
if (data.success) {
// 如果添加成功则关闭此窗口
$("#UserWin").window("close");
// 刷新当前数据窗格
$("#ptList").datagrid("reload");
}
}
});
});
// 监控编辑窗口事件，当窗口关闭时清空窗口内表单数据
$("#UserWin").window({
"onClose" : function() {
$("#UserForm").form("clear");
}
});
//验证密码
$("#cc").extend($.fn.validatebox.defaults.rules, {    
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: '两次密码不一致，请重新输入.'   
    }    
});
};
</script>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',border:false"
style="border-bottom:1px solid #ddd;height:35px;padding:2px 5px;background:#fafafa;">
<div style="float:left;padding-top:3px;">
<a id="addUser" href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-add'">添加用户</a> <a
id="delUser" href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-remove'">删除用户</a>
<a id="updateUser" href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-edit'">修改用户</a> 
</div>
<div style="float:right;padding-top:3px;">
<input id="ptShearch" class="easyui-searchbox"
data-options="prompt:'请输入查询值',menu:'#mm',searcher:doSearch"
style="width:300px;"></input>
<div id="mm" style="width:120px;margin-right:2px;">
<div data-options="name:'loginName'">登陆名称</div>
</div>
</div>
</div>
<div data-options="region:'center',border:false">

<table id="ptList" class="easyui-datagrid"
data-options="url:'./user/getUsersList.do',pageSize:15,pageList:[15,20,25,30],fitColumns:true,singleSelect:false,pagination:true,fit:true,rownumbers:true">
<thead>
<tr>
    <th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'uid',width:40,hidden:true">ID</th>
<th data-options="field:'loginName',width:150,halign:'center'">登陆名称</th>
<th data-options="field:'treeFarm',width:150,halign:'center',formatter:function(value, row, index) {if (row.treeFarm) {return row.treeFarm.tfname;}else {return value;}}">所属林场名称</th>
<th data-options="field:'realName',width:150,halign:'center'">真实姓名</th>
<th data-options="field:'telephone',width:150,halign:'center'">联系方式</th>

</tr>
</thead>
</table>
</div>
<div id="UserWin" class="easyui-window" title="添加用户分类"
style="width:400px;height:300px;"
data-options="minimizable:false,maximizable:false,resizable:false,collapsible:false,modal:true,closed:true,inline:true,draggable:false">
<form id="UserForm" method="post" onsubmit="{return false;}"
action="">
<input type="hidden" id="uidVDB" name="uid" />
<table
style="width:350px;height:250px;font-family: Tahoma,Geneva,'微软雅黑','宋体';">

<tr>
<td align="right" width="80px;">登陆名称</td>
<td style="padding-left:10px;"><input id="loginNameVDB"
name="loginName" class="easyui-validatebox"
data-options="required:true,validType:'length[2,20]'" 
style="width:250px;height:25px;" />
</td>
</tr>
<tr>
<td align="right" width="80px;">登陆密码</td>
<td style="padding-left:10px;">
<input id="hidePwd"  name="loginPwd" type="hidden"  />
<input id="loginPwdVDB"
name="loginPwd" class="easyui-validatebox"
data-options="required:true,validType:'length[2,20]'" type="password"
style="width:250px;height:25px;" />
</td>
</tr>
<tr>
<td align="right" width="80px;">验证密码</td>
<td style="padding-left:10px;"><input id="loginPwd" type="password" class="easyui-validatebox"     
                        required="required" validType="equals['#loginPwdVDB']" 
                        style="width:250px;height:25px;"/>   </td>
</tr>


<tr>
<td align="right" width="80px;">权限管理</td>
<td style="padding-left:10px;">
林业局<input type="radio" id="lyj"  name="qx" value="1" onclick="lyj" />
     林场<input type="radio" id="lc"name="qx" value="2"  onclick="lc"/>
 <input id="tfckbox" class="easyui-combobox" name="tfid" style="width:135px;height:29px;"
data-options="valueField: 'tfid',textField: 'tfname',url:'./treeFarm/getTreeFarmByAuthority.do',editable:false" value="请选择" />    
 </td>
</tr>
<tr>
<td align="right" width="80px;">联系方式</td>
<td style="padding-left:10px;"><input id="telephoneVDB"
name="telephone" class="easyui-validatebox"
data-options="required:true,validType:'length[2,20]'"
style="width:250px;height:25px;" />
</td>
</tr>
<tr>
<td align="right" width="80px;">真实姓名</td>
<td style="padding-left:10px;"><input id="realNameVDB"
name="realName" class="easyui-validatebox"
style="width:250px;height:25px;" />
</td>
</tr>

<tr align="center">
<td colspan="2"><a id="saveUser" href="#"
class="easyui-linkbutton" data-options="iconCls:'icon-save'">保&nbsp;&nbsp;存</a>
<a id="noUser" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-cancel'">取&nbsp;&nbsp;消</a>
</td>
</tr>
</table>
</form>
</div>
</div>

Answer 1

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    <title>森林防护安检信息系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/easyui-lang-zh_CN.js"></script>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" /><script type="text/javascript">
// 搜索框查询事件
function doSearch(value, name) {
alert(value+":"+name)
$("#ptList").datagrid("options").queryParams = {
tfName : name,
tfValue : value
};
$("#ptList").datagrid("reload");
}
// 远程加载渲染完毕后执行方法。
$.parser.onComplete = function() {
// 添加按钮事件
$("#addUser").bind("click", function() {
$("#UserWin").window("setTitle","添加林场分类");
$("#UserWin").window("open");
});
// 取消按钮事件
$("#noUser").bind("click", function() {
$("#UserWin").window("close");
});
//修改按钮事件
$("#updateUser").bind("click", function() {
// 修改窗口标题
$("#UserWin").window("setTitle","修改林场分类");
// 获取当前选择行，如果为空则提示
var column = $("#ptList").datagrid("getSelected");
if(column){
    $("#uidVDB").attr("value",column.uid);
    $("#tfckbox").combobox("select",column["treeFarm"].tfid);
$("#loginNameVDB").attr("value",column.loginName);
$("#realNameVDB").attr("value",column.realName);
$("#telephoneVDB").attr("value",column.telephone);
$("#hidePwd").attr("value",column.loginPwd);
$("#reVDB").attr("value",column.re);

// 去掉林场名称验证
$("#UserWin").window("open");
}else{
$.messager.alert('警告','请选择需要操作的数据!'); 
} 
});

//权限管理





       //删除按钮事件
$("#delUser").bind("click", function() {
var array = $("#ptList").datagrid("getSelections");
var idStr="";
for(var i=0; i<array.length; i++){
if(i!=array.length-1){
         idStr += array[i].uid+",";
        }else{
            idStr+= array[i].uid;
        } 
}
if(idStr == ""){
$.messager.alert("提示", "请选择要删除的记录！", "info");
}else {
$.messager.confirm("询问", "您是否要删除当前选中记录？", function(b) {
if(b){

// 执行删除的Ajax delete
jQuery.ajax({  
        type:"post",  
        url:"./user/delete.do?idStr="+idStr,  
        success: function aa(data) { 
         // 刷新当前数据窗格
$("#ptList").datagrid("reload");
        }
    });
    }
});
}
});
// 保存按钮事件
$("#saveUser").bind("click", function() {
$("#UserForm").form("submit", {
url : "user/saveOrAdd.do",
onSubmit : function() {
var isValid = $(this).form('validate');
if (!isValid) {
$.messager.progress('close'); // 如果表单是无效的则隐藏进度条
}
return isValid; // 返回false终止表单提交
},
success : function(data) {
var data = eval('(' + data + ')'); // 将返回信息转换为JSON格式。  
$.messager.alert("系统消息", data.message);
if (data.success) {
// 如果添加成功则关闭此窗口
$("#UserWin").window("close");
// 刷新当前数据窗格
$("#ptList").datagrid("reload");
}
}
});
});
// 监控编辑窗口事件，当窗口关闭时清空窗口内表单数据
$("#UserWin").window({
"onClose" : function() {
$("#UserForm").form("clear");
}
});
//验证密码
$("#cc").extend($.fn.validatebox.defaults.rules, {    
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: '两次密码不一致，请重新输入.'   
    }    
});
};
</script>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',border:false"
style="border-bottom:1px solid #ddd;height:35px;padding:2px 5px;background:#fafafa;">
<div style="float:left;padding-top:3px;">
<a id="addUser" href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-add'">添加用户</a> <a
id="delUser" href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-remove'">删除用户</a>
<a id="updateUser" href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-edit'">修改用户</a> 
</div>
<div style="float:right;padding-top:3px;">
<input id="ptShearch" class="easyui-searchbox"
data-options="prompt:'请输入查询值',menu:'#mm',searcher:doSearch"
style="width:300px;"></input>
<div id="mm" style="width:120px;margin-right:2px;">
<div data-options="name:'loginName'">登陆名称</div>
</div>
</div>
</div>
<div data-options="region:'center',border:false">

<table id="ptList" class="easyui-datagrid"
data-options="url:'./user/getUsersList.do',pageSize:15,pageList:[15,20,25,30],fitColumns:true,singleSelect:false,pagination:true,fit:true,rownumbers:true">
<thead>
<tr>
    <th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'uid',width:40,hidden:true">ID</th>
<th data-options="field:'loginName',width:150,halign:'center'">登陆名称</th>
<th data-options="field:'treeFarm',width:150,halign:'center',formatter:function(value, row, index) {if (row.treeFarm) {return row.treeFarm.tfname;}else {return value;}}">所属林场名称</th>
<th data-options="field:'realName',width:150,halign:'center'">真实姓名</th>
<th data-options="field:'telephone',width:150,halign:'center'">联系方式</th>

</tr>
</thead>
</table>
</div>
<div id="UserWin" class="easyui-window" title="添加用户分类"
style="width:400px;height:300px;"
data-options="minimizable:false,maximizable:false,resizable:false,collapsible:false,modal:true,closed:true,inline:true,draggable:false">
<form id="UserForm" method="post" onsubmit="{return false;}"
action="">
<input type="hidden" id="uidVDB" name="uid" />
<table
style="width:350px;height:250px;font-family: Tahoma,Geneva,'微软雅黑','宋体';">

<tr>
<td align="right" width="80px;">登陆名称</td>
<td style="padding-left:10px;"><input id="loginNameVDB"
name="loginName" class="easyui-validatebox"
data-options="required:true,validType:'length[2,20]'" 
style="width:250px;height:25px;" />
</td>
</tr>
<tr>
<td align="right" width="80px;">登陆密码</td>
<td style="padding-left:10px;">
<input id="hidePwd"  name="loginPwd" type="hidden"  />
<input id="loginPwdVDB"
name="loginPwd" class="easyui-validatebox"
data-options="required:true,validType:'length[2,20]'" type="password"
style="width:250px;height:25px;" />
</td>
</tr>
<tr>
<td align="right" width="80px;">验证密码</td>
<td style="padding-left:10px;"><input id="loginPwd" type="password" class="easyui-validatebox"     
                        required="required" validType="equals['#loginPwdVDB']" 
                        style="width:250px;height:25px;"/>   </td>
</tr>


<tr>
<td align="right" width="80px;">权限管理</td>
<td style="padding-left:10px;">
林业局<input type="radio" id="lyj"  name="qx" value="1" onclick="lyj" />
     林场<input type="radio" id="lc"   name="qx" value="2"  onclick="lc"/>
 <input id="tfckbox" class="easyui-combobox" name="tfid" style="width:135px;height:29px;"
data-options="valueField: 'tfid',textField: 'tfname',url:'./treeFarm/getTreeFarmByAuthority.do',editable:false" value="请选择" />    
 </td>
</tr>
<tr>
<td align="right" width="80px;">联系方式</td>
<td style="padding-left:10px;"><input id="telephoneVDB"
name="telephone" class="easyui-validatebox"
data-options="required:true,validType:'length[2,20]'"
style="width:250px;height:25px;" />
</td>
</tr>
<tr>
<td align="right" width="80px;">真实姓名</td>
<td style="padding-left:10px;"><input id="realNameVDB"
name="realName" class="easyui-validatebox"
style="width:250px;height:25px;" />
</td>
</tr>

<tr align="center">
<td colspan="2"><a id="saveUser" href="#"
class="easyui-linkbutton" data-options="iconCls:'icon-save'">保&nbsp;&nbsp;存</a>
<a id="noUser" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-cancel'">取&nbsp;&nbsp;消</a>
</td>
</tr>
</table>
</form>
</div>
</div>

Answer 2

document.getElementById("lyj").onclick = function(){
if(this.checked){
document.getElementById("tfckbox").style.display = "none";
}else{
document.getElementById("tfckbox").style.display = "block";
}
}
document.getElementById("lc").onclick = function(){
if(this.checked){
document.getElementById("tfckbox").style.display = "block";
}else{
document.getElementById("tfckbox").style.display = "none";
}
}没有添加页面最初加载时，初始化的显示，你自己修改下吧。

Answer 3

var lyjQx = document.getElementById("lyj"),
lcQx = document.getElementById("lc"),
qxSel = document.getElementById("tfckbox"),
checkQx = function(){
if(lyjQx.checked || !lcQx.checked){
qxSel.style.display="none"
}
if(lcQx.checked){
qxSel.style.display="block"
}
}

window.onload = function(){checkQx()}
lyjQx.onclick = function(){checkQx()}
lcQx.onclick = function(){checkQx()}