1. 程式人生 > >Vue中CheckBox複選框實現單選效果

Vue中CheckBox複選框實現單選效果

為什麼有radio不用,偏偏要使用CheckBox實現單選效果呢?

答案是如果想同時實現單選,又實現可以一個都不選的話。只能使用CheckBox來做了。

 

通過jQuery來做

實現思路:

1.如果當前物件不選中:去除當前物件的選中狀態

2.如果當前物件選中:

  1. 通過CheckBox的class迴圈,去除所有CheckBox的選中狀態。
  2. 設定當前的物件的狀態為選中(因為在迴圈時把狀態改為false了)

 if ($(event.target).prop("checked") == false) { //判斷當前物件為不選中
         $(event.target).prop("checked", false);  //去除當前物件的選中狀態
  } else {  //判斷當前物件為選中狀態
          $(".CheckBoxClass").each(function () {  //通過迴圈CheckBox的class所有CheckBox均不選中
                $(this).prop("checked", false);
           });
           $(event.target).prop("checked", true); //設定當前物件選中(因為在上面迴圈時把當前的狀態變為不選中)
    }

 $(event.target)是Vue裡面的當前物件。