Vue中CheckBox複選框實現單選效果
阿新 • • 發佈:2018-11-12
為什麼有radio不用,偏偏要使用CheckBox實現單選效果呢?
答案是如果想同時實現單選,又實現可以一個都不選的話。只能使用CheckBox來做了。
通過jQuery來做
實現思路:
1.如果當前物件不選中:去除當前物件的選中狀態
2.如果當前物件選中:
- 通過CheckBox的class迴圈,去除所有CheckBox的選中狀態。
- 設定當前的物件的狀態為選中(因為在迴圈時把狀態改為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裡面的當前物件。