单选多选

最新推荐文章于 2022-11-28 22:05:08 发布

weixin_30300523

最新推荐文章于 2022-11-28 22:05:08 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiao2017/p/10457220.html

本文详细介绍了使用HTML和CSS创建教育经历表单的过程，展示了如何通过JavaScript实现表单元素的交互，包括选择框的样式定制及功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
.aggress{
    height: 40px;line-height: 40px;padding-left:20px;background: url(../image/selection0.png) 2px center no-repeat;
    background-size: 14px 14px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
}
.aggress.on{
    background: url(../image/selection1.png) 2px center no-repeat;
}
</style>
<div class="modal_cover50" style="display: block">
    <div class="modal50 h414"  >　　
        <div class="modal_content50 br2" >
            <img src="../image/fork.png" class="closeBox" alt="" />
            <p class="h40 lh40">教育经历</p>
            <form action="" method="" class="modelForm m-l30">
                <div class="editGroup1">
                    <label class="w75 d-inline t-r">XXXXXX ：</label>
                    <input type="text" class="" placeholder="" style="width: 280px">
                </div>
                <div class="">
                    <div class="aggress d-inline" style="">是否同意</div>
                    <div class="aggress d-inline" style="">是否同意</div>
                </div>
                <div class="t-c m-t30 formButton">
                    <button class="c-w bc-theme">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $(".aggress").click(function () {
            if( $(this).hasClass('on') ) {
                $(this).removeClass('on');
            }else {
                $(".aggress").removeClass('on');
                $(this).addClass('on');
            }
        })
　　)}
</script>

转载于:https://www.cnblogs.com/xiaoxiao2017/p/10457220.html