jQuery模擬下拉框單選框複選Select，Checkbox，Radio

在項目中，你會發現設計稿中經常會有單選框，複選框，但都不是系統默認的樣式，這就能夠用jquery來模擬它們：
如圖所示，實現它們所須要的代碼以下：

首先須要引入的代碼：

<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.inputbox.css" type="text/css" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.inputbox.js"></script>

 

其次html結構代碼：

<!--模擬下拉框Select開始-->
    <div class="hotdiv">
        <div class="numberN">1.模擬下拉框Select</div>
        <div class="div clearfix">
            <div name="zhiwei" type="selectbox" class="zhiwei">
                <div class="opts">
                    <a href="javascript:;" val="職位" class="selected">職位</a> 
                    <a href="javascript:;" val="職位2">職位2</a>
                </div>
             </div>
             <div name="hangye" type="selectbox" class="zhiwei">
                <div class="opts">
                    <a href="javascript:;" val="行業" class="selected">行業</a> 
                    <a href="javascript:;" val="互聯網">互聯網</a>
                </div>
             </div>
        </div>
        <div class="div">
            <div name="place" type="selectbox" class="place">
                <div class="opts">
                    <a href="javascript:;" val="工做地點" class="selected">工做地點</a> 
                    <a href="javascript:;" val="上海">上海</a>
                </div>
             </div> 
       </div>   
   </div>
   <!--模擬下拉框Select開始結束-->
   
   
   <!--模擬Checkbox開始開始-->
   <div class="savediv">
        <div class="numberN">2.Checkbox</div>
        <div class="cbt checked" name="check"  type="checkbox" val="1" ></div>
        <span class="save">保存</span>
    </div>
    <!--模擬Checkbox開始結束-->
    
    
    <!--模擬Radio開始開始-->
   <div class="Radiodiv clearfix">
        <div class="numberN">3.Radio</div>
        <div name="rbt" type="radiobox" val="cn" class="rbt checked"></div><span>中文</span>
        <div name="rbt" type="radiobox" val="en" class="rbt"></div><span>英文</span>
    </div>
    <!--模擬Radio開始結束-->

 

jquery調用代碼以下：

$(function(){
        $('div[name="zhiwei"]').inputbox({ height:30,width:130});
        $('div[name="hangye"]').inputbox({ height:30,width:155});
        $('div[name="place"]').inputbox({ height:30,width:290});
        
        $('.cbt').inputbox();
        
        $('div[name="rbt"]').inputbox();
    })

須要demo猛點該文字，百度雲盤下載