做表单的时候,经常会用到radio类型,用来作为选项值,但是html中默认的radio表单是比较丑的,就是个圆形小孔。而在仿站的时候,很多网站的选项都是十分漂亮,比如直接是方块形式的,点击还会出现各种效果,但是radio又无法直接改为那种形式,当时我做一个模板的时候就思考了很多,最后也想到一种比较简单的思路。那就是,设置js点击事件,点击外部的区块则选中对应radio,然后在把radio直接隐藏就行了,表单可以正常的提交过去。
需要实现的效果
单个区块的代码如下,为定义的li标签
<li class="active">
<input type="radio" name="egold" value="1000" class="radio" checked="checked" style="display:none;">
<div class="app_borderBlock">
<span class="top">
<span class="number">
<i>1000小说币</i>
</span>
</span>
<span class="bottom">10元</span>
</div>
</li>
其中class="active"为区块被点击选中后效果的定义,且只出现在第一个。
js的代码则设置为,点击区块则选中区块内radio表单,并且将li标签新增class="active"
<script type="text/javascript">
$(document).ready(function () {
$('.app_openReadBlock_select li').click(function () {
$(this).parent().find('li').removeClass('active');
var $radio = $(this).find("input[type=radio]"),
$flag = $radio.is(":checked");
if( !$flag ){
$radio.prop("checked",true);
}
$(this).addClass('active');
})
})
</script>
上述js的意思就是,当指定区域的li标签内容被点击后,则删除其它li标签的class="active",并且将被选中的li赋予class,同时选中里面的radio表单。
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/680/