jQuery手机端单选按钮表单美化特效代码下载


jQuery手机端单选按钮表单美化特效代码下载
jQuery手机端单选按钮表单美化特效代码下载以及手机端单选按钮、表单美化等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/lc_switch.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/lc_switch.min.js"></script>

3. HTML代码

    <div class="inner-input">
        <label class="fixed-w" style="width: 8em;">10.销售部</label>
        <div class="to_chose">
            <input type="checkbox" class="lcs_check" name="dept" value="10" autocomplete="off" />
        </div>
    </div>
    <div class="inner-input">
        <label class="fixed-w" style="width: 8em;">20.市场部</label>
        <div class="to_chose">
            <input type="checkbox" class="lcs_check" name="dept" value="20" autocomplete="off" />
        </div>
    </div>
    <div class="inner-input">
        <label class="fixed-w" style="width: 8em;">30.财务部</label>
        <div class="to_chose">
            <input type="checkbox" class="lcs_check" name="dept" value="30" checked autocomplete="off" />
        </div>
    </div>
    <div class="inner-input">
        <label class="fixed-w" style="width: 8em;">40.设计部</label>
        <div class="to_chose">
            <input type="checkbox" class="lcs_check" name="dept" value="40" autocomplete="off" />
        </div>
    </div>
    <div class="inner-input">
        <label class="fixed-w" style="width: 8em;">50.研发部</label>
        <div class="to_chose">
            <input type="checkbox" class="lcs_check" name="dept" value="50" checked autocomplete="off" />
        </div>
    </div>
    <div class="inner-input btn-groups">
        <button type="button" onClick="checkfun(40, 1)" class="do">选中设计部</button>
        <button type="button" onClick="checkfun(30, 0)" class="do">取消财务部</button>
        <button type="button" onClick="resetfun()" class="reset" >重置</button>
    </div>
    <div class="btn">
        <button type="button" class="save">保存信息</button>
    </div>
    <!-- 依赖jquery -->
    <!-- core library -->
    <script type="text/javascript">
        $('.lcs_check').lc_switch();
    </script>
    <script type="text/javascript">
        var checkfun = function (val, checked) {
            var checkNode = $("[name=dept][value="+val+"]")
            checked ? checkNode.lcs_on() : checkNode.lcs_off();
        }
        var resetfun = function () {
            window.location.reload();
        }
        $('.save').click(function(){
            // 获取选中的值
            var checkids = [];
            $('[name=dept]:checked').each(function(item){
                checkids.push( $(this).val() )
            })
            alert( "选中的部门:" + checkids.join(',') )
        })
    </script>

相关推荐

发表评论

相关文章