MVC之三个单选按钮的切换选择

---

实现需求：

1、三个多选按钮中：只能同时选择限时抢购和分享金或者拼团特惠和分享金，其中限时抢购和拼团特惠不能同时选择。并且点击后显示，再次点击赢隐藏。

 1   @*活动信息*@
 2                     <div>
 3                         <div class="main_tb_tit"><h2>活动信息</h2></div>
 4                         <table cellpadding="0" cellspacing="0" class="p_user_tb wp100">
 5                             <tr class="IsTicketEnble">
 6                                 <th>参与活动类型:</th>
 7                                 <td>
 8                                     <input type="checkbox" name="IsTicketRobbing" id="IsTicketRobbing" Onclick="checkIsTicket()" value="1" @(Html.ValueFor(m => m.IsTicketRobbing).ToString() == "1".ToString() ? "checked" : "")> 限时抢购10                                     &nbsp; &nbsp;&nbsp; &nbsp;<input type="checkbox" id="IsCollage" name="IsCollage" Onclick="checkIsCollage()" value="1" @(Html.ValueFor(m => m.IsCollage).ToString() == "1".ToString() ? "checked" : "")>拼团特惠
11                                     &nbsp; &nbsp;&nbsp; &nbsp;<input type="checkbox" id="IsShareMoney" Onclick="checkIsShareMoney()" name="IsShareMoney" value="1" @(Html.ValueFor(m => m.IsShareMoney).ToString() == "1".ToString() ? "checked" : "")>分享金
12                                 </td>
13                             </tr>
14                             <tr class="IsTicketEnble" style="@Html.Raw(Model.IsTicketRobbing ==0?"display:none":"display:")" id="TrPurchasePrice">
15                                 <th>抢购价：</th>
16                                 <td><input class="txt br2" name="PurchasePrice" id="PurchasePrice" type="text" size="30" value="@Model.PurchasePrice"></td>
17                             </tr>
18                             <tr class="IsTicketEnble" style="@Html.Raw(Model.IsTicketRobbing ==0?"display:none":"display:")" id="TrRushStock">
19                                 <th>抢票库存量：</th>
20                                 <td>
21                                     <input class="txt br2" name="RushStock" id="RushStock" type="text" size="30" value="@Model.RushStock">
22                                     <span class="add_important_tips add_tips">  默认0代表无限库存，产品库存量包含抢票库存量</span>
23                                 </td>
24                             </tr>
25                             <tr class="IsTicketEnble" style="@Html.Raw(Model.IsTicketRobbing ==0?"display:none":"display:")" id="TrRushBeginDate">
26                                 <th>抢票游玩开始日期：</th>
27                                 <td>
28                                     <input class="txt br2" name="RushBeginDate" id="RushBeginDate" type="text" size="30" value="@Model.RushBeginDate">
29                                     <span class="add_important_tips add_tips"> 游玩可抢票时间应在普通购票时间区间内</span>
30 
31                                 </td>
32                             </tr>
33                             <tr class="IsTicketEnble" style="@Html.Raw(Model.IsTicketRobbing ==0?"display:none":"display:")" id="TrRushStopDate">
34                                 <th>抢票游玩结束日期：</th>
35                                 <td><input class="txt br2" name="RushStopDate" id="RushStopDate" type="text" size="30" value="@Model.RushStopDate"></td>
36                             </tr>
37                             <tr class="IsTicketEnble" style="@Html.Raw(Model.IsTicketRobbing ==0?"display:none":"display:")" id="TrRushStartTime">
38                                 <th>抢票倒计时开始时间：</th>
39                                 <td>
40                                     <input class="txt br2" name="RushStartTime" id="RushStartTime" type="text" size="30" value="@Model.RushStartTime">
41                                     <span class="add_important_tips add_tips"> 设置抢票倒计时的开始时间</span>
42                                 </td>
43                             </tr>
44                             <tr class="IsTicketEnble" style="@Html.Raw(Model.IsTicketRobbing ==0?"display:none":"display:")" id="TrRushEndTime">
45                                 <th>抢票倒计时结束时间：</th>
46                                 <td>
47                                     <input class="txt br2" name="RushEndTime" id="RushEndTime" type="text" size="30" value="@Model.RushEndTime">
48                                     <span class="add_important_tips add_tips"> 设置抢票倒计时的结束时间</span>
49                                 </td>
50                             </tr>
51                             <tr class="IsCollageEnble" style="@Html.Raw(Model.IsCollage ==0?"display:none":"display:")" id="TrCollagePrice">
52                                 <th>拼团价：</th>
53                                 <td><input class="txt br2" name="CollagePrice" id="CollagePrice" type="text" size="30" value="@Model.CollagePrice"></td>
54                             </tr>
55                             <tr class="IsCollageEnble" style="@Html.Raw(Model.IsCollage ==0?"display:none":"display:")" id="TrCollageTerm">
56                                 <th>拼团有效期：</th>
57                                 <td>
58                                     <input class="txt br2" name="CollageTerm" id="CollageTerm" type="text" size="30" value="@Model.CollageTerm" required>
59                                     <span class="add_important_tips add_tips"> 拼团有效期以“天”为单位</span>
60                                 </td>
61                             </tr>
62                             <tr class="IsCollageEnble" style="@Html.Raw(Model.IsCollage ==0?"display:none":"display:")" id="TrCollageType">
63                                 <th>成团人数：</th>
64                                 <td><input class="txt br2" name="GroupNumber" id="GroupNumber" type="text" size="30" value="@Model.GroupNumber" required></td>
65                             </tr>
66                             <tr class="IsCollageEnble" style="@Html.Raw(Model.IsCollage ==0?"display:none":"display:")" id="TrMaxBuyNumber">
67                                 <th>最大购买数量：</th>
68                                 <td><input class="txt br2" name="MaxBuyNumber" id="MaxBuyNumber" type="text" size="30" value="@Model.MaxBuyNumber" required></td>
69                             </tr>
70 
71 
72 
73                             <tr class="IsShareMoneyEnble" style="@Html.Raw(Model.IsShareMoney ==0?"display:none":"display:")" id="TrShareMoneyType">
74                                 <th>分享金类别：</th>
75                                 <td>
76                                     <select name="ShareMoneyType" id="ShareMoneyType" οnchange="ChangeShareMoneyType()">
77                                         <option value="0" @(Model.ShareMoneyType == 0 ? "selected" : "")>固定金额</option>
78                                         <option value="1" @(Model.ShareMoneyType == 1 ? "selected" : "")>比列</option>
79                                     </select>
80                                 </td>
81                             </tr>
82                             <tr class="IsShareMoneyEnble" style="@Html.Raw(Model.IsShareMoney ==0?"display:none":"display:")" id="TrOneLevelShareMoney">
83                                 <th> 一级分享金金额： </th>
84                                 <td>
85                                     <input class="txt br2" name="OneLevelShareMoney" id="OneLevelShareMoney" type="text" size="30" value="@Model.OneLevelShareMoney">
86                                     <span class="add_important_tips add_tips" id="oneLove">上一级分享金 </span>
87                                 </td>
88                             </tr>
89                             <tr class="IsShareMoneyEnble" style="@Html.Raw(Model.IsShareMoney ==0?"display:none":"display:")" id="TrTwoLevelShareMoney">
90                                 <th>二级分享金金额：</th>
91                                 <td>
92                                     <input class="txt br2" name="TwoLevelShareMoney" οnblur="OnblurOne()" id="TwoLevelShareMoney" type="text" size="30" value="@Model.TwoLevelShareMoney">
93                                     <span class="add_important_tips add_tips" id="twoLove"> 上两级分享金</span>
94                                 </td>
95                             </tr>
96                         </table>
97                     </div>

---

@*优惠活动选择*@

<script type="text/javascript">
        //限时抢购单击事件
        function checkIsTicket() {
            var ticket = $("#IsTicketRobbing").prop("checked");//获取是否选中，返回bool类型。
            var collage = $("#IsCollage").prop("checked");
            var share = $("#IsShareMoney").prop("checked");
            if (ticket == 1) {
                $("#TrRushStartTime").show();
                $("#TrRushEndTime").show();
                $("#TrPurchasePrice").show();
                $("#TrRushBeginDate").show();
                $("#TrRushStopDate").show();
                $("#TrRushStock").show();
                $("#IsCollage").val = 0;
                $("#IsCollage").prop("checked", false);
            }
            else {
                $("#TrRushStartTime").hide();
                $("#TrRushEndTime").hide();
                $("#TrPurchasePrice").hide();
                $("#TrRushBeginDate").hide();
                $("#TrRushStopDate").hide();
                $("#TrRushStock").hide();
            }
            if (collage == 1) {
                $("#TrCollagePrice").hide();
                $("#TrCollageTerm").hide();
                $("#TrCollageType").hide();
                $("#TrMaxBuyNumber").hide();
            }
            if (share == 1) {
                $("#TrShareMoneyType").show();
                $("#TrOneLevelShareMoney").show();
                $("#TrTwoLevelShareMoney").show();
            }
            else {
                $("#TrShareMoneyType").hide();
                $("#TrOneLevelShareMoney").hide();
                $("#TrTwoLevelShareMoney").hide();
            }
        }
　　　　//拼团特惠单击事件
        function checkIsCollage() {
            var ticket = $("#IsTicketRobbing").prop("checked");
            var collage = $("#IsCollage").prop("checked");
            var share = $("#IsShareMoney").prop("checked");

            if (collage == 1) {
                $("#TrCollagePrice").show();
                $("#TrCollageTerm").show();
                $("#TrCollageType").show();
                $("#TrMaxBuyNumber").show();
                $("#IsTicketRobbing").val = 0;
                $("#IsTicketRobbing").prop("checked", false);
                $("#TrRushStartTime").hide();
                $("#TrRushEndTime").hide();
                $("#TrPurchasePrice").hide();
                $("#TrRushBeginDate").hide();
                $("#TrRushStopDate").hide();
                $("#TrRushStock").hide();
            }
            else {
                $("#TrCollagePrice").hide();
                $("#TrCollageTerm").hide();
                $("#TrCollageType").hide();
                $("#TrMaxBuyNumber").hide();
            }
            if (share == 1) {
                $("#TrShareMoneyType").show();
                $("#TrOneLevelShareMoney").show();
                $("#TrTwoLevelShareMoney").show();
            }
        }
　　　　//分享金单击事件
        function checkIsShareMoney() {
            var ticket = $("#IsTicketRobbing").prop("checked");
            var collage = $("#IsCollage").prop("checked");
            var share = $("#IsShareMoney").prop("checked");

            if (collage == true) {
                $("#TrCollagePrice").show();
                $("#TrCollageTerm").show();
                $("#TrCollageType").show();
                $("#TrMaxBuyNumber").show();
                $("#IsTicketRobbing").val = 0;
                $("#IsTicketRobbing").prop("checked", false);
            }
            else {
                $("#TrCollagePrice").hide();
                $("#TrCollageTerm").hide();
                $("#TrCollageType").hide();
                $("#TrMaxBuyNumber").hide();
            }
            if (ticket == true) {
                $("#TrRushStartTime").show();
                $("#TrRushEndTime").show();
                $("#TrPurchasePrice").show();
                $("#TrRushBeginDate").show();
                $("#TrRushStopDate").show();
                $("#TrRushStock").show();
            }
            else {
                $("#TrRushStartTime").hide();
                $("#TrRushEndTime").hide();
                $("#TrPurchasePrice").hide();
                $("#TrRushBeginDate").hide();
                $("#TrRushStopDate").hide();
                $("#TrRushStock").hide();
            }
            if (share == true) {
                $("#TrShareMoneyType").show();
                $("#TrOneLevelShareMoney").show();
                $("#TrTwoLevelShareMoney").show();
            }
            else {
                $("#TrShareMoneyType").hide();
                $("#TrOneLevelShareMoney").hide();
                $("#TrTwoLevelShareMoney").hide();
            }
        }
        
        function ChangeShareMoneyType() {
            var v = $("#ShareMoneyType").val();//获取下拉框的值
            if (v == "1") {

 //一级分享金为正整数[验证正整数]
                $("#OneLevelShareMoney").keydown(function (e) {//鼠标离开触发事件
                    var code = parseInt(e.keyCode);
                    if (code >= 96 && code <= 105 || code >= 48 && code <= 57 || code == 8) {
                        return true;
                    } else {
                        return false;
                    }
                })
                //一级分享金为正整数文本框输入事件,任何非正整数的输入都重置为10
                $("#OneLevelShareMoney").bind("input propertychange", function () {
                    if (isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(10);
                })

　　　　　　　　//二级分享金为正整数
                $("#TwoLevelShareMoney").keydown(function (e) {
                    var code = parseInt(e.keyCode);
                    if (code >= 96 && code <= 105 || code >= 48 && code <= 57 || code == 80) {
                        return true;
                    } else {
                        return false;
                    }
                })
                //二级分享金为正整数文本框输入事件,任何非正整数的输入都重置为5
                $("#TwoLevelShareMoney").bind("input propertychange", function () {
                    if (isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(5);
                })
            }
            if (v == "0") {
                $("#oneLove").html("价格只能为整数");
                $("#twoLove").html("价格只能为整数");

                //一级分享金为正整数
                $("#OneLevelShareMoney").keydown(function (e) {
                    var code = parseInt(e.keyCode);
                    if (code >= 96 && code <= 105 || code >= 48 && code <= 57 || code == 8) {
                        return true;
                    } else {
                        return false;
                    }
                })
                //一级分享金为正整数文本框输入事件,任何非正整数的输入都重置为10
                $("#OneLevelShareMoney").bind("input propertychange", function () {
                    if (isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(10);
                })
                //二级分享金为正整数
                $("#TwoLevelShareMoney").keydown(function (e) {
                    var code = parseInt(e.keyCode);
                    if (code >= 96 && code <= 105 || code >= 48 && code <= 57 || code == 80) {
                        return true;
                    } else {
                        return false;
                    }
                })
                //二级分享金为正整数文本框输入事件,任何非正整数的输入都重置为5
                $("#TwoLevelShareMoney").bind("input propertychange", function () {
                    if (isNaN(parseFloat($(this).val())) || parseFloat($(this).val()) <= 0) $(this).val(5);
                })
            }
        }

//默认保存小数，并且小数点后保留两位小数
function OnblurOne() {
            var v = $("#ShareMoneyType").val();
            if (v == "0") {
                var one = $("#OneLevelShareMoney").val();
                var b = Number(one).toFixed(2);
                $("#OneLevelShareMoney").attr("value", b);
                var two = $("#TwoLevelShareMoney").val();
                var c = Number(two).toFixed(2);
                $("#TwoLevelShareMoney").attr("value", c);
            }
        }

</script>

---

 

效果：

 

转载于:https://www.cnblogs.com/hugeboke/p/10169902.html