laber 个性radio

标签：

外星人1 外星人2 外星人3

<p id="test11">
    <label class="btna" > <input type="radio" style="display: none " class="ghs" name="ghs" value="外星人1"/>外星人1</label>
    <label class="btna" > <input type="radio" style="display: none " class="ghs" name="ghs" value="外星人2"/>外星人2</label>
    <label class="btna" ><input type="radio" style="display: none " checked class="ghs" name="ghs" value="外星人3"/>外星人3</label>
</p>
<p>
    <h3 id="h3te"></h3>
</p>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<style>
    .btna{border: 1px solid #c9ccd0;border-radius: 3px;width: 50px;margin-left:3px;text-align: center;color: #9c9c9c;cursor: pointer;background-color: white}
</style>
<script>
    $(‘#test11‘).on(‘click‘,function(){
        $(‘#test11‘).children().css(‘border‘,‘‘);
        var val = $(‘#test11 :checked‘).val();
        $(‘#test11 :checked‘).parent().css(‘border‘,‘ 2px solid #FF6600‘);
        $(‘#h3te‘).html(val);
    });
</script>

laber 个性radio

标签：

原文地址：http://www.cnblogs.com/wqy61/p/4829287.html