鸿蒙应用开发input多选效果实现 原创

<div class="content">
    <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
           headericon="/image/soushuo.jpeg" placeholder="Please input text" onchange="change"
           onenterkeyclick="enterkeyClick">
    </input>
    <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
    <text style="margin-top: 50px;">多选</text>
    <div class="check">
        <text>踢足球：</text>
        <input onchange="checkboxOnChange_one" checked="true" type="checkbox"></input>
        <text>打篮球：</text>
        <input onchange="checkboxOnChange_two" checked="true" type="checkbox"></input>
        <text>打羽毛球：</text>
        <input onchange="checkboxOnChange_three" checked="true" type="checkbox"></input>
    </div>
    <text style="margin-top: 50px;">单选</text>
    <div class="radio_button">
        <div>
            <text>选择1</text>
            <input type="radio" checked='true' name="radioSample" value="按钮1" onchange="onRadioChange('按钮1')"></input>
        </div>
        <div>
            <text>选择2</text>
            <input type="radio" checked='false' name="radioSample" value="按钮2" onchange="onRadioChange('按钮2')"></input>
        </div>
        <div>
            <text>选择3</text>
            <input type="radio" checked='false' name="radioSample" value="按钮3" onchange="onRadioChange('按钮3')"></input>
        </div>
    </div>
</div>
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.

.content {
    width: 100%;
    flex-direction: column;
    align-items: center;
}
.input {
    placeholder-color: gray;
    align-items: center;
}
.button {
    background-color: gray;
    margin-top: 20px;
    align-items: center;
}
.check{
    margin-top: 50px;
}
.radio_button{
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
}
Js代码如下：

import prompt from '@system.prompt'
export default {
    change(e){
        prompt.showToast({
            message: "value: " + e.value,
            duration: 3000,
        });
    },
    enterkeyClick(e){
        prompt.showToast({
            message: "enterkey clicked",
            duration: 3000,
        });
    },
    buttonClick(e){
        this.$element("input").showError({
            error: 'error text'
        });
    },
    checkboxOnChange_one(e) {
        prompt.showToast({
            message:'足球为: ' + e.checked,
            duration: 3000,
        });
    },
    checkboxOnChange_two(e) {
        prompt.showToast({
            message:'篮球为: ' + e.checked,
            duration: 3000,
        });
    },
    checkboxOnChange_three(e) {
        prompt.showToast({
            message:'羽毛球为: ' + e.checked,
            duration: 3000,
        });
    },
    onRadioChange(inputValue, e) {
        if (inputValue === e.value) {
            prompt.showToast({
                message: '当前按钮为:' + e.value,
                duration: 3000,
            });
        }
    }
}
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.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.