JQuery 滑動checkbox(Switch開關)寫入表單

使用JQuery做一個啟用、停用的切換switch，並將參數傳到表單中；

範例如下：

第一段JS：判斷PHP取自資料庫的參數，並呈現目前的狀態

<script>//檢查產品發佈狀態，顯示對應的publish狀態

        $(document).ready(function(){

           var publish=<?php echo"$is_publish" ?>;

           if (publish==0){

              $("#publish").prop("checked",'');

           }else{

              $("#publish").prop("checked",true);

           }

        });

</script>

HTML：表單中CheckBox的部分

- 由CSS去控制Checkbox樣式，讓他顯示成一個Switch開關

- 實際上是一個Chcekbox判斷是否有勾選

- 用onchange參數呼叫JS來寫入整個表單要傳給另一支php的參數

<!--Switch開關顯示html的部分-->

<label class="col_title">是否發布</lable>

<label class="switch">

    <input id="publish" type="checkbox" name="publish" onchange="check_publish()" >

    <span class="slider round"></span>

</label>

CSS：顯示如Switch開關的CSS

- 來源出處

.switch {

    position: relative;

    display: inline-block;

    width: 60px;

    height: 34px;

  }

  

  /* Hide default HTML checkbox */

  .switch input {

    opacity: 0;

    width: 0;

    height: 0;

  }

  

  /* The slider */

  .slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

  }

  

  .slider:before {

    position: absolute;

    content: "";

    height: 26px;

    width: 26px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

  }

  

  input:checked + .slider {

    background-color: #2196F3;

  }

  

  input:focus + .slider {

    box-shadow: 0 0 1px #2196F3;

  }

  

  input:checked + .slider:before {

    -webkit-transform: translateX(26px);

    -ms-transform: translateX(26px);

    transform: translateX(26px);

  }

  

  /* Rounded sliders */

  .slider.round {

    border-radius: 34px;

  }

  

  .slider.round:before {

    border-radius: 50%;

  }

第二段JS：根據checkbox狀態，寫入要傳到表單的值(非必要)

*checkbox勾選時預設value為on，否則就是空值

*因此接收表單的程式只要判斷有沒有回傳值，再寫入對應的資料即可

-以下是變更on為a，若後端要特定數值可參考

<script>

//檢查發布CheckBox是否被勾選，寫入特定值

        function check_publish(){  

            if($("#publish").is(':checked'))

                $("#publish").val('a');

        }

 </script>