jquery操作radio标签的选中事件

最新推荐文章于 2023-08-12 12:21:00 发布

weixin_34226182

最新推荐文章于 2023-08-12 12:21:00 发布

阅读量1.7k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2428684/blog/685914

版权

2019独角兽企业重金招聘Python工程师标准>>>

速记。

任务要求：如下图，选择活动类型1出现“活动1-1”和“活动1-2”，类型2则是出现活动2的选项。

但是选择后都需要给到默认选项。正常情况下，页面中会有默认checked=“check”选中项，所以要先移除这个属性，再对想要的选项作选中操作。

<label class="comm-config-label">活动名称</label>
<div class="fn-left">
    <input class="cname-radio open-type 1-1-type" type="radio" name="cptName" value="1" checked="check">
    <span class="open-type">活动1-1</span>
    
    <input class="cname-radio no-open-type" type="radio" name="cptName" value="2">
    <span class="no-open-type">活动1-2</span>
    
    <input class="cname-radio open-type 2-1-type" type="radio" name="cptName" value="3" style="display:none;">
    <span class="open-type" style="display:none;">活动2-1</span>
    
    <input class="cname-radio no-open-type" type="radio" name="cptName" value="4" style="display:none;">
    <span class="no-open-type" style="display:none;">活动2-2</span>
</div>

jquery操作：重点在于对默认项的选中操作，移除input中的checked属性，再对默认项作选中操作，这里用了eq(index)这个方法，比较有效，要注意这里的index下标是从0开始。还有就是prop的属性操作，用传统的attr()会偶有失常。

<script type="text/javascript">
$(".pub-radio").change(function(){
    var radioVal = $("input[name='pubType']:checked").val();
    if(radioVal == '1'){
        $(".open-type").hide();
        $(".no-open-type").show();
         //默认选项
        $("input[name='cptName']").removeAttr('checked'); 
        $($("input[name='cptName']").eq(1)).prop('checked',true);
     }
     if(radioVal == '2'){
         $(".no-open-type").hide();
         $(".open-type").show();
         //默认选项
         $("input[name='cptName']").removeAttr('checked'); 
         $($("input[name='cptName']").eq(0)).prop('checked',true);
      }
});
</script>

转载于:https://my.oschina.net/u/2428684/blog/685914