在html中利用label组件布局,把第一个组件影藏起来,给label定义for等于man,让他找到id值等于man组件,然后触发组件的事件。具体代码如下:
<label for="man">
<button id="btn" bintap="clickBtn" hidden>我是button 按钮</button>
<view >我是label组件内的内容</view>
<checkbox-group bindchange="checkboxChange" id="checkbox">
<checkbox value="中国" />中国
<checkbox value="美国" />美国
</checkbox-group>
<radio-group bindchange="radioChange">
<radio value="男" id="man" />男
<radio value="女" id="women" />女
</radio-group>
<label for="man">
<button id="btn" bintap="clickBtn" hidden>我是button 按钮</button>
<view >我是label组件内的内容</view>
<checkbox-group bindchange="checkboxChange" id="checkbox">
<checkbox value="中国" />中国
<checkbox value="美国" />美国
</checkbox-group>
<radio-group bindchange="radioChange">
<radio value="男" id="man" />男
<radio value="女" id="women" />女
</radio-group>
</label>
在JS 文件中添加clickBtn、checkboxChange、radioChange3个事件 函数,分别打印不同信息,代码如下:
page({
clickBtn:function(){
console.log("单击了按钮组件");
},
checkboxChange:function(){
console.log("单击了多项选择器组件");
},
radioChange:function(){
console.log('单击了单项选择器组件');
},
})