本文档介绍了一个项目中关于单选框联动效果的实现，详细讲述了如何通过JavaScript控制单选框的选择，使得在选择不同收费类型时，计费基数和其他相关选项能够自动选中或禁用。例如，当选择一次性费用时，初始本金被选中，计算基础不可选；而选择计提式费用时，存续本金被选中，并允许选择计算基础。
在项目开发的时候，遇到了一个类似联动效果的单选框效果。也就是你点击这个单选框后，另外一个单选框会默认的选中，其他的单选框不可以编辑或者可以编辑。以下是具体的需求：
<p>当收费类型为：</p><p> 一次性费用 --> 默认选中初始本金 (其他不可选)--> 计算基础都不可选(也就是那个框中没有点)</p><p> 计提式费用 --> 默认选中存续本金(其他不可选) --> 计算基础可以挑选(也就是默认选中一个后，可以两个之间来回单击选择)</p><p> 不规则费用 --> 默认选中初始本金(其他不可选) --> 计算基础不可选</p>
<%@pagelanguage="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<divid="winProdBaseInfo"class="easyui-window"title="管理"data-options="modal:true,closed:true,iconCls:'icon-save'"style="width:550px;height:450px;padding:10px;">
<divstyle="padding:10px 0 10px 60px">
<formid="fProdBaseInfo"name="fProdBaseInfo"method="post">
<inputid="f_glfiuuid"name="glfiuuid"type="hidden"value="">
<table>
<tr>
<td>名称</td>
<td>
<inputclass="easyui-validatebox"type="text"id="f_feename"name="feename"data-options="required:true"maxlength="25"style="width:205px"/>
</td>
</tr>
<tr>
<td>范围</td>
<td>
<selectclass="easyui-combobox"id="f_targettype"name="targettype"data-options="editable:false"panelHeight="auto"style="width:210px">
<optionvalue="">-- 请选择 --</option>
<optionvalue="P"selected="selected">利率型</option>
<optionvalue="V">净值型</option>
<optionvalue="A">投资账户</option>
</select>
</td>
</tr>
<tr>
<td>类型</td>
<td>
<inputclass="easyui-validatebox"type="text"id="f_feebooktype"name="feebooktype"/>
</td>
</tr>
<tr>
<td>收费类型</td>
<td>
<inputtype="radio"checked="checked"name="feetype"value="0"/>一次性费用
<inputtype="radio"name="feetype"value="1"/>计费式费用
<inputtype="radio"name="feetype"value="2"/>不规则费用
</td>
</tr>
<tr>
<td>计费基数</td>
<td>
<inputtype="radio"checked="checked"name="printype"value="0"/>初始本金
<inputtype="radio"name="printype"value="2"/>存续本金
<inputtype="radio"name="printype"value="3"/>资产规模
</td>
</tr>
<tr>
<td>计算基础</td>
<td>
<inputtype="radio"name="basis"value="0">A/360
<inputtype="radio"name="basis"value="1">A/365
</td>
</tr>
<tr>
<td>备注</td>
<td>
<inputclass="easyui-textbox"data-options="multiline:true"name="remark"style="width:210px;height:60px">
</td>
</tr>
</table>
</form>
</div>
<divstyle="text-align:center;padding:5px">
<ahref="javascript:void(0)"class="easyui-linkbutton"id="btn_save"onclick="saveData()">保存</a>
<ahref="javascript:void(0)"class="easyui-linkbutton"onclick="closeWindow()">取消</a>
</div>
</div>
采用控制的js方法
function addData(){
$('#fProdBaseInfo').form('clear'); //清空表单中的元素
EasyUI.disableForm('fProdBaseInfo',false); //设置为可编辑状态
/*在弹出之前初始化
* 默认弹出 收费类型为:一次性费用 计费基数:初始本金
*/
/*$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}
})*/
/* $('input[name = feetype]').get(0).checked = true;
$('input[name = printype]').get(0).checked = true;
$('input[name = basis]').each(function(){
this.disabled="disabled";
});*/
//默认弹出 收费类型为:一次性费用 计费基数:初始本金
$('input[name = feetype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]').each(function(){
this.disabled="disabled";
});
}
})
$('#winProdBaseInfo').window('open'); //新弹出窗口
/*//联动效果
$('input[name = feetype]:radio').each(function(){
if(this.value == '1'){
$('input[name = printype]').get(1).checked = true;
}else{
$('input[name = printype]').each(function(){
this.disabled="disabled";
});
}
})*/
//收费类型
$('input[name = feetype]:radio').unbind();
$('input[name = feetype]:radio').bind('click',function(){
//收费方式为计提式费用 --> 默认选中存续本金 --> 计算基础可以挑选
if(this.value == '1'){
//$('input[name = printype]').get(1).checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '2'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled = "";
if(this.value == '0'){
this.checked = true;
}
});
}
//在点击的时候切换 收费类型为:一次性费用 计费基数:初始本金 计算基础不可以点击
if(this.value == '0'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled="disabled";
this.checked = false; //移除可选
});
}
//在点击的时候切换 收费类型为:不规则费用 --> 默认选中初始本金 --> 计算基础不选
if(this.value == '2'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled="disabled";
this.checked = false; //移除可选
});
}
});
}
其中主要的js方法为
在项目开发的时候，遇到了一个类似联动效果的单选框效果。也就是你点击这个单选框后，另外一个单选框会默认的选中，其他的单选框不可以编辑或者可以编辑。以下是具体的需求：<p>当收费类型为：</p><p> 一次性费用 --> 默认选中初始本金 (其他不可选)--> 计算基础都不可选(也就是那个框中没有点)</p><p> 计提式费用 --> 默认选中存续本金(其他不可选) --> 计算基础可以挑选(也就是默认选中一个后，可以两个之间来回单击选择)</p><p> 不规则费用 --> 默认选中初始本金(其他不可选) --> 计算基础不可选</p>
<%@pagelanguage="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><divid="winProdBaseInfo"class="easyui-window"title="管理"data-options="modal:true,closed:true,iconCls:'icon-save'"style="width:550px;height:450px;padding:10px;">
<divstyle="padding:10px 0 10px 60px">
<formid="fProdBaseInfo"name="fProdBaseInfo"method="post">
<inputid="f_glfiuuid"name="glfiuuid"type="hidden"value="">
<table>
<tr>
<td>名称</td>
<td>
<inputclass="easyui-validatebox"type="text"id="f_feename"name="feename"data-options="required:true"maxlength="25"style="width:205px"/>
</td>
</tr>
<tr>
<td>范围</td>
<td>
<selectclass="easyui-combobox"id="f_targettype"name="targettype"data-options="editable:false"panelHeight="auto"style="width:210px">
<optionvalue="">-- 请选择 --</option>
<optionvalue="P"selected="selected">利率型</option>
<optionvalue="V">净值型</option>
<optionvalue="A">投资账户</option>
</select>
</td>
</tr>
<tr>
<td>类型</td>
<td>
<inputclass="easyui-validatebox"type="text"id="f_feebooktype"name="feebooktype"/>
</td>
</tr>
<tr>
<td>收费类型</td>
<td>
<inputtype="radio"checked="checked"name="feetype"value="0"/>一次性费用
<inputtype="radio"name="feetype"value="1"/>计费式费用
<inputtype="radio"name="feetype"value="2"/>不规则费用
</td>
</tr>
<tr>
<td>计费基数</td>
<td>
<inputtype="radio"checked="checked"name="printype"value="0"/>初始本金
<inputtype="radio"name="printype"value="2"/>存续本金
<inputtype="radio"name="printype"value="3"/>资产规模
</td>
</tr>
<tr>
<td>计算基础</td>
<td>
<inputtype="radio"name="basis"value="0">A/360
<inputtype="radio"name="basis"value="1">A/365
</td>
</tr>
<tr>
<td>备注</td>
<td>
<inputclass="easyui-textbox"data-options="multiline:true"name="remark"style="width:210px;height:60px">
</td>
</tr>
</table>
</form>
</div>
<divstyle="text-align:center;padding:5px">
<ahref="javascript:void(0)"class="easyui-linkbutton"id="btn_save"onclick="saveData()">保存</a>
<ahref="javascript:void(0)"class="easyui-linkbutton"onclick="closeWindow()">取消</a>
</div>
</div>
采用控制的js方法function addData(){
$('#fProdBaseInfo').form('clear'); //清空表单中的元素
EasyUI.disableForm('fProdBaseInfo',false); //设置为可编辑状态
/*在弹出之前初始化
* 默认弹出 收费类型为:一次性费用 计费基数:初始本金
*/
/*$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}
})*/
/* $('input[name = feetype]').get(0).checked = true;
$('input[name = printype]').get(0).checked = true;
$('input[name = basis]').each(function(){
this.disabled="disabled";
});*/
//默认弹出 收费类型为:一次性费用 计费基数:初始本金
$('input[name = feetype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]').each(function(){
this.disabled="disabled";
});
}
})
$('#winProdBaseInfo').window('open'); //新弹出窗口
/*//联动效果
$('input[name = feetype]:radio').each(function(){
if(this.value == '1'){
$('input[name = printype]').get(1).checked = true;
}else{
$('input[name = printype]').each(function(){
this.disabled="disabled";
});
}
})*/
//收费类型
$('input[name = feetype]:radio').unbind();
$('input[name = feetype]:radio').bind('click',function(){
//收费方式为计提式费用 --> 默认选中存续本金 --> 计算基础可以挑选
if(this.value == '1'){
//$('input[name = printype]').get(1).checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '2'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled = "";
if(this.value == '0'){
this.checked = true;
}
});
}
//在点击的时候切换 收费类型为:一次性费用 计费基数:初始本金 计算基础不可以点击
if(this.value == '0'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled="disabled";
this.checked = false; //移除可选
});
}
//在点击的时候切换 收费类型为:不规则费用 --> 默认选中初始本金 --> 计算基础不选
if(this.value == '2'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled="disabled";
this.checked = false; //移除可选
});
}
});
}
//默认弹出 收费类型为:一次性费用 计费基数:初始本金
$('input[name = feetype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]').each(function(){
this.disabled="disabled";
});
}
})
$('#winProdBaseInfo').window('open'); //新弹出窗口
//收费类型
$('input[name = feetype]:radio').unbind();
$('input[name = feetype]:radio').bind('click',function(){
//收费方式为计提式费用 --> 默认选中存续本金 --> 计算基础可以挑选
if(this.value == '1'){
//$('input[name = printype]').get(1).checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '2'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled = "";
if(this.value == '0'){
this.checked = true;
}
});
}
//在点击的时候切换 收费类型为:一次性费用 计费基数:初始本金 计算基础不可以点击
if(this.value == '0'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled="disabled";
this.checked = false; //移除可选
});
}
//在点击的时候切换 收费类型为:不规则费用 --> 默认选中初始本金 --> 计算基础不选
if(this.value == '2'){
this.checked = true;
$('input[name = printype]:radio').each(function(){
if(this.value == '0'){
this.checked = true;
}else{
this.disabled="disabled";
}
});
$('input[name = basis]:radio').each(function(){
this.disabled="disabled";
this.checked = false; //移除可选
});
}
});
其中主要思想就是利用jquery的属性过滤选择器
参考了以下代码
代码如下:
<style type="text/css">
/*高亮显示*/
.highlight{
background-color: gray
}
</style>
。代码如下:
<body>
<div>
<p>Hello</p>
</div>
<div id="test">ID为test的DIV</div>
<input type="checkbox" id="s1" name="football" value="足球" />足球
<input type="checkbox" name="volleyball" value="排球" />排球
<input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
<input type="checkbox" id="s4" name="other" value="其他" />其他
</body>
1. [attribute]用法
定义：匹配包含给定属性的元素
。代码如下:
$("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素
2. [attribute=value]用法
定义：匹配给定的属性是某个特定值的元素
。代码如下:
$("input[name='basketball']").attr("checked",true); //name属性值为basketball的input元素选中
3. [attribute!=value]用法
定义：匹配给定的属性是不包含某个特定值的元素
。代码如下:
$("input[name!='basketball']").attr("checked",true); //name属性值不为basketball的input元素选中
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);
4. [attribute^=value]用法
定义：匹配给定的属性是以某些值开始的元素
。代码如下:
$("input[name^='foot']").attr("checked",true); //查找所有 name 以 'foot' 开始的 input 元素
5. [attribute$=value]用法
定义：匹配给定的属性是以某些值结尾的元素
。代码如下:
$("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素
6. [attribute*=value]用法
定义：匹配给定的属性是以包含某些值的元素
。代码如下:
$("input[name*='sket']").attr("checked",true); //查找所有 name 包含 'sket' 的 input 元素
7. [selector1][selector2][selectorN]用法
定义：复合属性选择器，需要同时满足多个条件时使用
。代码如下:
$("input[id][name$='ball']").attr("checked",true); //找到所有含有 id属性，并且它的 name属性是以 ball结尾的
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
