选择框效果 -- 单选、多选

一、单选按钮（通过添加删除class实现）

1.html代码：

<div class="content">
    <div class="payment">
        <div class="mode ">
            <div class="payment-left bg-active"></div>
        </div>
        <div class="payment-right">
            <span class="payment-span">按月缴费</span>
        </div>
    </div>

    <div class="payment">
        <div class="mode">
            <div class="payment-left"></div>
        </div>
        <div class="payment-right">
            <span class="payment-span">全额缴费</span>
        </div>

    </div>
</div>    

2.js代码：

$(".payment-left").click(function() {
        if($(this).hasClass("bg-active")) {
            $(this).removeClass("bg-active").parent().parent().siblings().find(".payment-left").addClass("bg-active");
        } else {
            $(this).addClass("bg-active").parent().parent().siblings().find(".payment-left").removeClass("bg-active");
        }
})

单选按钮 ( 同级 )

1.html代码：

<div>
    <span class="oneselfs bg_active">本人1</span>
    <span class="oneselfs">本人2</span>
    <span class="oneselfs">本人3</span>
</div>

 

2.js代码：

$(".oneselfs").click(function(){
                            
   $(this).addClass("bg_active").siblings().removeClass("bg_active");

})

 

二、多选按钮（通过图片的src属性）

1.html代码:

<div class="content">
      <div class="options">
           <img src="../img/checked.png" />
           <p class="detail">选项1</p>
      </div>
      <div class="options">
           <img src="../img/check.png" />
           <p class="detail">选项2</p>
       </div>
      <div class="options">
           <img src="../img/check.png" />
           <p class="detail">选项3</p>
     </div>
 </div> 

2.js代码

<script type="text/javascript">
    $('.options').click(function() {
        var changeImg = $(this).find('img').attr('src');
        if(changeImg == "../img/check.png") {
                $(this).find('img').attr('src', '../img/checked.png');//选中
        } else {
                $(this).find('img').attr('src', '../img/check.png');//未选中
        }
    })
</script>