基於 Bootstrap 和 jQuery 的 checkbox 的應用

_Sakura發表於2020-01-15
bootjQuery

checkbox的單選多選元件

在網上找了外掛自己改了一下，比原生的好看些，也可以自己修改

  1. HTML
    1 單選 
    <lable>
<i class="input_style checkbox_bg">
 <input type="checkbox" name="addcart" value="1">
</i>
</lable>

              2 多選

<lable>
  <i class="input_style checkbox_bg" style="margin-left: 30px;">
    <input type="checkbox" id="checkall" name="checkall">
  </i> 全選
</lable>
  1. CSS
.input_style{
    background: url(../../images/green.png) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
}
 .radio_bg_check{
    background-position: -166px 0 ;
}
.checkbox_bg_check{
    background-position: -48px 0;
}
  1. JS（基於jQuery的）
(function($) {
  $.extend({ //進行方法的擴充套件
    inputStyle: function() {
      function check(el, cl) { //el 為傳入的物件，cl為進行變化的claa樣式，可以自定義，也可以直接用我的
        $(el).each(function() {
          $(this).parent('i').removeClass(cl);
          var checked = $(this).prop('checked');
          if (checked) {
            $(this).parent('i').addClass(cl);
          }

        })
      }

      function checkall(el, cl) { //對於全選的操作
        $(el).each(function() {
          $(this).prop("checked", true); //將checked屬性改為true
          $(this).parent('i').addClass(cl); //將選中樣式加上
        })
      }

      function checkadeletall(el, cl) { //對於全不選的操作
        $(el).each(function() {
          $(this).prop("checked", false);
          $(this).parent('i').removeClass(cl);

        })
      }
      // radio的利用， 此篇主要事針對於checkbox的應用， 若想用radio的可以自行修改
      // $('input[type="radio"]').on('click', function() {
      //   check('input[type="radio"]', 'radio_bg_check');
      // })
      $('input[name="addcart"]').on('click', function() { //當點選單選框
        check('input[name="addcart"]', 'checkbox_bg_check');//傳入物件為input[name="addcart"]，樣式為checkbox_bg_check
        console.log("進入點選")
        if ($(this).is(':checked')) { //應甲方要求，當本來點選全選按鈕，全部選中時，再點選單選框使其不為全選狀態時，全選按鈕自動的變為不選樣式
          console.log("checkall若選中，則還是選中，若沒有，無變化")
          return;
        } else {
          console.log("checkall不選中！");
          $('input[name="checkall"]').attr("checked", false); //將屬性改為checked ，false
          $('input[name="checkall"]').parent('i').removeClass('checkbox_bg_check'); //將樣式去除
        }

      })
      $('input[name="checkall"]').on('click', function() {
        check('input[name="checkall"]', 'checkbox_bg_check'); //先讓他自身選中
        if ($(this).is(':checked')) {
          $('input[name="addcart"]').each(function() {
            checkall('input[name="addcart"]', 'checkbox_bg_check'); //當全選時，觸發全選函式
          });
        } else {
          $('input[name="addcart"]').each(function() {
            checkadeletall('input[name="addcart"]', 'checkbox_bg_check'); //當不為全選時，觸發不全選按鈕
          });
        }
      })
    }
  })
})(jQuery)
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章