jQuery实现一个自定义的单选按钮radio

效果如下:
jQuery实现一个自定义的单选按钮radio_第1张图片
html代码如下:

<html>
    <head>
        <title>
            test
        title>

        <style type="text/css">
            dt,dd{
                float: left;display:inline-block;
            }
            dt{
                padding-top:24px;
            }
            ul li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;list-style: none;}
            ul li a{ height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;text-decoration: none;color:#ccc;}
            ul li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:1px; bottom:1px; background:url(img/selected.gif) no-repeat right bottom; z-index:99; display:none;}
            .selected i{display: block;}
        style>
        <script type="text/javascript" src="jquery.js">script>
        <script type="text/javascript">
                $(function(){
                    $('ul li').click(function(){
                        if(!$(this).hasClass("selected")){
                            $(this).addClass("selected").siblings("li").removeClass("selected");
                            alert($(this).data('sex'));
                            $("input[name='sex']").val($(this).data('sex'));
                        }
                    })
                })
        script>
    head>

    <body>
        <form>

            <dl>
                <dt>性别dt>
                <dd>
                    <ul>
                        <li data-sex="1" class="selected"><a href="#">a><i>i>li>
                        <li data-sex="2"><a href="#">a><i>i>li>
                    ul>
                    <input type="hidden" name="sex" value="1" />
                dd>
            dl>
        form>
    body>
html>

下载源文件

你可能感兴趣的:(前端,jquery,javascript,前端)