原文地址：https://www.jb51.net/article/150127.htm
1、模擬實現多選框：
實現思路：思路非常簡單，給每個選項綁定checked屬性，類型為布爾值，點擊取反即可
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--wxml-->
<
view
class
=
'wrap'
>
<
view
class
=
'checkbox-con'
>
<
checkbox-group
bindchange
=
"checkboxChange"
>
<
label
class
=
"{{item.checked?'checkbox checked':'checkbox'}}"
wx:for
=
"{{checkboxArr}}"
bindtap
=
'checkbox'
data-index
=
"{{index}}"
wx:key
=
"item.name"
>
<
checkbox
value
=
"{{item.name}}"
checked
=
"{{item.checked}}"
/>{{item.name}}
</
label
>
</
checkbox-group
>
<
button
type
=
'primary'
bindtap
=
'confirm'
>提交</
button
>
</
view
>
</
view
>
|
小程序的單選組件radio和多選組件checkbox的樣式只提供更改顏色，這對實際項目中的需求顯然是不夠的，所以自己模擬實現一個。
踩坑點：小程序不支持操作dom
1、模擬實現多選框：
實現思路：思路非常簡單，給每個選項綁定checked屬性，類型為布爾值，點擊取反即可
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--wxml-->
<
view
class
=
'wrap'
>
<
view
class
=
'checkbox-con'
>
<
checkbox-group
bindchange
=
"checkboxChange"
>
<
label
class
=
"{{item.checked?'checkbox checked':'checkbox'}}"
wx:for
=
"{{checkboxArr}}"
bindtap
=
'checkbox'
data-index
=
"{{index}}"
wx:key
=
"item.name"
>
<
checkbox
value
=
"{{item.name}}"
checked
=
"{{item.checked}}"
/>{{item.name}}
</
label
>
</
checkbox-group
>
<
button
type
=
'primary'
bindtap
=
'confirm'
>提交</
button
>
</
view
>
</
view
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
/* wxss */
.wrap{
width
:
550
rpx;
margin
:
50
rpx
auto
}
.checkbox-con{
margin-top
:
40
rpx;
text-align
:
center
}
.checkbox{
width
:
260
rpx;
height
:
72
rpx;
line-height
:
72
rpx;
font-size
:
28
rpx;
color
:
#888888
;
border
:
1
rpx
solid
#CECECE
;
border-radius:
5
rpx;
display
: inline-
block
;
margin
:
0
10
rpx
20
rpx
0
;
position
:
relative
}
.checked{
color
:
#1A92EC
;
background
: rgba(
49
,
165
,
253
,
0.08
);
border
:
1
rpx
solid
#31A5FD
;
}
.checkbox checkbox{
display
:
none
}
.checked-img{
width
:
28
rpx;
height
:
28
rpx;
position
:
absolute
;
top
:
0
;
right
:
0
}
|
js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
Page({
data: {
checkboxArr: [{
name:
'選項A',
checked: false
}, {
name:
'選項B',
checked: false
}, {
name:
'選項C',
checked: false
}, {
name:
'選項D',
checked: false
}, {
name:
'選項E',
checked: false
}, {
name:
'選項F',
checked: false
}],
},
checkbox: function (e) {
var index = e.currentTarget.dataset.index;//獲取當前點擊的下標
var checkboxArr = this.data.checkboxArr;//選項集合
checkboxArr[index].checked = !checkboxArr[index].checked;//改變當前選中的checked值
this.setData({
checkboxArr: checkboxArr
});
},
checkboxChange: function (e) {
var checkValue = e.detail.value;
this.setData({
checkValue: checkValue
});
},
confirm: function() {// 提交
console.log(this.data.checkValue)//所有選中的項的value
},
})
|
2、模擬實現單選框
思路：這個和多選差不多，區別就是需要在點擊時清空其他項的選中狀態，然后再把當前項設置為選中狀態
代碼也差不多
wxml的話就把check-group標簽改為radio-group; js那邊就在點擊時多加個判斷
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--wxml-->
<
view
class
=
'wrap'
>
<
view
class
=
'checkbox-con'
>
<
radio-group
bindchange
=
"radioChange"
>
<
label
class
=
"{{item.checked?'checkbox checked':'checkbox'}}"
wx:for
=
"{{checkboxArr}}"
bindtap
=
'radio'
data-index
=
"{{index}}"
wx:key
=
"item.name"
>
<
checkbox
value
=
"{{item.name}}"
checked
=
"{{item.checked}}"
/>{{item.name}}
</
label
>
</
radio-group
>
<
button
type
=
'primary'
bindtap
=
'confirm'
>提交</
button
>
</
view
>
</
view
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
Page({
data: {
checkboxArr: [{
name:
'選項A'
,
checked:
false
}, {
name:
'選項B'
,
checked:
false
}, {
name:
'選項C'
,
checked:
false
}, {
name:
'選項D'
,
checked:
false
}, {
name:
'選項E'
,
checked:
false
}, {
name:
'選項F'
,
checked:
false
}],
},
radio:
function
(e) {
var
index = e.currentTarget.dataset.index;
//獲取當前點擊的下標
var
checkboxArr =
this
.data.checkboxArr;
//選項集合
if
(checkboxArr[index].checked)
return
;
//如果點擊的當前已選中則返回
checkboxArr.forEach(item => {
item.checked =
false
})
checkboxArr[index].checked =
true
;
//改變當前選中的checked值
this
.setData({
checkboxArr: checkboxArr
});
},
radioChange:
function
(e) {
var
checkValue = e.detail.value;
this
.setData({
checkValue: checkValue
});
},
confirm:
function
() {
// 提交
console.log(
this
.data.checkValue)
//所有選中的項的value
},
})
|
最后上個效果截圖