jquery操作radio标签的选中事件
2016-06-02 00:00
686 查看
摘要: jquery radio
速记。
任务要求: 如下图,选择活动类型1出现“活动1-1”和“活动1-2”,类型2则是出现活动2的选项。
但是选择后都需要给到默认选项。正常情况下,页面中会有默认checked=“check”选中项,所以要先移除这个属性,再对想要的选项作选中操作。
jquery操作:重点在于对默认项的选中操作,移除input中的checked属性,再对默认项作选中操作,这里用了eq(index)这个方法,比较有效,要注意这里的index下标是从0开始。还有就是prop的属性操作,用传统的attr()会偶有失常。
速记。
任务要求: 如下图,选择活动类型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>
相关文章推荐
- jQuery-属性选择器
- jquery中的选择器
- 基于JQuery的messager弹窗组件开发
- jquery跑马灯抽奖
- jqGrid表格插件常用方法及函数留档
- jQuery查找——parent/parents/parentsUntil/closest
- 在jQuery和JavaScript中,实现转跳
- jquery cookie操作
- formValidator 不支持jquery1.9以上的解决办法
- jQuery搭建简单的瀑布流页面
- 自定义WordPress登陆后台
- jQuery CSS 操作 - position() 方法
- jquery获取对象
- jquery学习
- jquery的ajax和getJson跨域获取json数据的实现方法
- jQuery easyUI datagrid 增加求和统计行的实现代码
- jQuery的 pageX
- jquery ezUI 双击行记录弹窗查看明细的实现方法
- jquery 实现滚动条下拉时无限加载的简单实例
- JQuery中的事件绑定