单选框_简单样式的单选框&多选框

业务中时常需要我们根据不同场景做出不同样式的单选框&多选框，下面简单写两个。

单选框

方块单选框

html

 //html

  <div class="group">
    <label class="active">
        <input type="radio" checked=true name="parent_radio" value="积分商城搭建"/>
        积分商城搭建</label>
    <label>
        <input type="radio" name="parent_radio" value="积分礼品供应"/>
        积分礼品供应</label>
    <label>
        <input type="radio" name="parent_radio" value="积分商城代运营"/>
        积分商城代运营</label>
    <label>
        <input type="radio" name="parent_radio" value="其他定制需求"/>
        其他定制需求</label>
</div>

css

//css

/* 单选框 */
input[type="radio"] {
    /*取消自带按钮*/
    color:gray;
    display: none;
}
 
.group>label{
    /*未选中状态*/
    float: left;
    color: #333333;
    font-size: 13px;
    padding: 7px 14px;
    border: 1px solid #333333;
    margin-right: 15px;
    margin-bottom: 15px;
    font-weight: Medium;
}
.group>label.active{
    /*选中状态*/
    color: #1770E6;
    font-size: 13px;
    padding: 7px 14px;
    border: 1px solid #1770E6;
    font-weight: Medium;
}

js

//js

//input单选框
  var demand_str = $('input:radio:checked').val()
  console.log(demand_str)
  $(".group label").click(function () {
      var index = $(this).index();
       $(".group label").removeClass("active"), 
       $(".group label").eq(index).addClass("active")
})

   $(".group input").click(function () {
      var index = $(this).index();
      demand_str = $('input:radio:checked').val(); //获取单选的值有三种写法
      // demand_str = $("input[type='radio']:checked").val();
      // demand_str = $("input[name='parent_radio']:checked").val();
      console.log(demand_str)
})

单选框-demo

多选框

方块多选框

html

//html

 <div class="group">

    <label class="active">
        <input type="checkbox" checked=true name="parent_checkbox" value="积分商城搭建"/>
        积分商城搭建</label>
    <label>
        <input type="checkbox" name="parent_checkbox" value="积分礼品供应"/>
        积分礼品供应</label>
    <label>
        <input type="checkbox" name="parent_checkbox" value="积分商城代运营"/>
        积分商城代运营</label>
    <label>
        <input type="checkbox" name="parent_checkbox" value="其他定制需求"/>
        其他定制需求</label>
</div>

css

//css

/* 单选框 */
input[type="checkbox"] {
    /*取消自带按钮*/
    color:gray;
    display: none;
}
 
.group>label{
    /*未选中状态*/
    float: left;
    color: #333333;
    font-size: 13px;
    padding: 7px 14px;
    border: 1px solid #333333;
    margin-right: 15px;
    margin-bottom: 15px;
    font-weight: Medium;
}
.group>label.active{
    /*选中状态*/
    color: #1770E6;
    font-size: 13px;
    padding: 7px 14px;
    border: 1px solid #1770E6;
    font-weight: Medium;
}

js

//js

//input单选框
  $(".group label").click(function (event) {
      var index = $(this).index();
          if($(event.target).is('input')){//对点击目标元素做判断,防止事件再次冒泡
        return;
      }
       if($(".group label").eq(index).hasClass("active")){
               $(".group label").eq(index).removeClass("active")
       }else{
               $(".group label").eq(index).addClass("active")
       }
  })

   $(".group input").click(function () {
      var index = $(this).index();
      var chk_value =[];//定义一个数组    
            $('input[name="parent_checkbox"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数    
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
            });  
     console.log(chk_value)
     
})

多选框-demo

注意：

解决label 和checkbox点击事件触发两次问题，参考下方文章

解决label 和checkbox点击事件触发两次问题​www.jianshu.com