利用JS对两行Input radio 进行互斥选择。

来源:互联网 发布:香港警匪片推荐知乎 编辑:程序博客网 时间:2024/06/06 05:42

根据项目需要对radio 进行选择 就是说第一种选了第二种不能在选了。

标签是很简单 直接  <input  id="radioX1" name="methodX" value="" checked>

主要说一下JS代码如下 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="js/jquery-3.0.0.min.js"></script></head><script type="text/javascript">    $(function(){        $('.radioItemY').change(function() {            var selectedvalueY = $("input[name='methodY']:checked").val();            $("[name='methodX']").attr("disabled", false);            switch (selectedvalueY){                case '案发辖区':                    $("#radio3X").attr("disabled", "disabled");                    break;                case '接警方式':                    $("#radio1X").attr("disabled", "disabled");                    break;                case '警情判定':                    $("#radio2X").attr("disabled", "disabled");                    break;            }        });        $('.radioItemX').change(function() {            var selectedvalueX = $("input[name='methodX']:checked").val();            $('#labelmethodX').html(" "+selectedvalueX);            $("select[name='selectClassX']").empty();            var option = $("<option>").val("").text("--未选择--");            $("select[name='selectClassX']").append(option);            $("[name='methodY']").attr("disabled", false);            switch (selectedvalueX){                case '案发辖区':                     $("#radio3Y").attr("disabled", "disabled");                    break;                case '接警方式':                    $("#radio1Y").attr("disabled", "disabled");                    break;                case '警情判定':                    $("#radio2Y").attr("disabled", "disabled");                    break;            }        });    });</script><body><div>    <label >统计维度X </label >         <input id="radio1X" class="radioItemX" type="radio" name="methodX" value="接警方式" checked="true"/>接警方式     <input id="radio2X" class="radioItemX" type="radio" name="methodX" value="警情判定" disabled/>警情判定     <input id="radio3X" class="radioItemX" type="radio" name="methodX" value="案发辖区" />案发辖区 </div><label >统计维度Y </label > <input id="radio1Y" class="radioItemY" type="radio" name="methodY" value="接警方式" disabled/>接警方式 <input id="radio2Y" class="radioItemY" type="radio" name="methodY" value="警情判定" checked="true" />警情判定 <input id="radio3Y" class="radioItemY" type="radio" name="methodY" value="案发辖区" />案发辖区 </body></html>


1 0