jQuery自定义问卷调查选项模版

很简单的设置问卷选项内容的功能特效，可以自由选择添加问题类型并设置选项内容，鼠标悬浮于问题上，可进行编辑问题、删除问题、问题上移、问题下移多种操作，编辑完整点击按钮即可看到效果。

分类：表单代码 > 输入框难易：

查看演示下载资源下载积分： 40 积分

开头需要引入css样式和javascript插件。

<link type="text/css" rel="stylesheet" href="css/wenjuan_ht.css">
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/index.js"></script>

设置好问题的类型：

<div class="but" style="padding-top: 20px">
    <select id="addquerstions" class="addquerstions" name="">
        <option value="-1">添加问题</option>
        <option value="0">单选</option>
        <option value="1">多选</option>
        <option value="2">填空</option>
        <option value="3">矩阵</option>
    </select>
    <button>提交问题</button>
</div>

写好选项卡区域和模板区域，部分代码如下：

<!--单选-->
<div class="xxk_xzqh_box dxuan ">
    <textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_dx" placeholder="单选题目"></textarea>
    <div class="title_itram">
        <div class="kzjxx_iteam">
            <input name="" type="radio" value="" class="dxk">
            <input name="" type="text" class="input_wenbk" value="" placeholder="选项">
            <label>
                <input name="" type="checkbox" value="" class="fxk"> <span>可填空</span>
            </label> <a href="javascript:void(0);" class="del_xm">删除</a>
        </div>
    </div>
    <a href="javascript:void(0)" class="zjxx">增加选项</a>
    <!--完成编辑-->
    <div class="bjqxwc_box">
        <a href="javascript:void(0);" class="qxbj_but">取消编辑</a>
        <a href="javascript:void(0);" class="swcbj_but"> 完成编辑</a>
    </div>
</div>