多选框数据绑定,js控制显示隐藏选中等方法

最新推荐文章于 2022-01-19 19:00:21 发布

转载最新推荐文章于 2022-01-19 19:00:21 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zpyboke/p/5156790.html

本文介绍了一种通过JavaScript控制固定资产和对外投资类别多选框显示与隐藏的方法，并根据选择的投资类型来更新显示的内容。

                <td  style="background:#F3F8FD; border-top-style: none; border-top-color: inherit; border-top-width: medium;" 
                    class="style1">投资分阿类:</td>
                <td colspan="3"; style="background:#F3F8FD;width:795px;padding-left:1px;border-top:none;">
                <div id="gdzc" style="display:none;">
                <input name="dxgdzc" type="checkbox" runat="server" id="shebei" value="设备" />设备
                <input name="dxgdzc" type="checkbox" runat="server" id="scjd" value="生产基地" />生产基地
                <input name="dxgdzc" type="checkbox" runat="server" id="fjyxdbgfjj" value="非经营性地、办公房基建" />非经营性地、办公房基建
                <input name="dxgdzc" type="checkbox" runat="server" id="bgglyfzx" value="办公管理用房装修" />办公管理用房装修
                </div>
上面的定义了name,type等属性的多选框.<div id="gdzc" style="display:none;">使其初始状态为隐藏.通过js来控制的.

                <div id="dwtz" style="display:none;">
                <input name="dxdwtz" type="checkbox" runat="server" id="jcss" value="基础设施" />基础设施
                <input name="dxdwtz" type="checkbox" runat="server" id="fdc" value="房地产" />房地产
                <input name="dxdwtz" type="checkbox" runat="server" id="tdcbj" value="土地储备金" />土地储备金
                <input name="dxdwtz" type="checkbox" runat="server" id="guquan" value="股权" />股权
                <input name="dxdwtz" type="checkbox" runat="server" id="jinron" value="金融" />金融
                </div>
                </td>

通过js控制多选框的显示隐藏,选中状态等           

function selchange() {
                //$("#seltype").empty();
                var sel = $("#selinvestmentType").val();
                if (sel == "固定资产") {
                    $("#gdzc").css('display', 'block');
                    $("#dwtz").css('display', 'none');

                    $("#jcss").attr("checked", false);
                    $("#fdc").attr("checked", false);
                    $("#tdcbj").attr("checked", false);
                    $("#guquan").attr("checked", false);
                    $("#jinron").attr("checked", false);

                } else if (sel == "对外投资") {
                    $("#gdzc").css('display', 'none');
                    $("#dwtz").css('display', 'block');
                    $("#shebei").attr("checked", false);
                    $("#scjd").attr("checked", false);
                    $("#fjyxd").attr("checked", false);
                    $("#bgfjj").attr("checked", false);
                    $("#bgglyfzx").attr("checked", false);
                } else if (sel == "") {
                    $("#gdzc").css('display', 'none');
                    $("#dwtz").css('display', 'none');
                    $("#shebei").attr("checked", false);
                    $("#scjd").attr("checked", false);
                    $("#fjyxd").attr("checked", false);
                    $("#bgfjj").attr("checked", false);
                    $("#bgglyfzx").attr("checked", false);
                    $("#jcss").attr("checked", false);
                    $("#fdc").attr("checked", false);
                    $("#tdcbj").attr("checked", false);
                    $("#guquan").attr("checked", false);
                    $("#jinron").attr("checked", false);
                }
            }