侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

jquery操作radio标签的选中事件

2024-05-11 星期六 / 0 评论 / 0 点赞 / 83 阅读 / 2435 字

速记。 任务要求: 如下图,选择活动类型1出现“活动1-1”和“活动1-2”,类型2则是出现活动2的选项。 但是选择后都需要给到默认选项。正常情况下,页面中会有默认checked=“check”选中

速记。

任务要求: 如下图,选择活动类型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>

 

广告 广告

评论区