小程序学习之旅----表单组件 buttoncheckboxforminputlabelradiosliderswitchtextarea获取表单数据

xiaoxiao2025-11-09  5

<view class='input'> <input placeholder="请输入内容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/> </view> <button bindtap='getData'>获取值</button> Page({ /** * 页面的初始数据 */ data: { inputValue: '' /*inputValue*/ }, doInput: function (e) { console.log(e); this.setData({ inputValue: e.detail.value }) }, getData(){ console.log(this.data.inputValue); } }) <view class='input'> <input placeholder="请输入内容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group> </view> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> <switch checked bindchange="switch1Change"/> <button bindtap='getData'>获取值</button> // pages/register/register.js Page({ /** * 页面的初始数据 */ data: { inputValue: '', /*inputValue*/ items: [ { name: 'USA', value: '美国', checked: 'true'}, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'TUR', value: '法国' } ] }, doInput: function (e) { console.log(e); this.setData({ inputValue: e.detail.value }) }, checkboxChange: function (e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) }, radioChange: function (e) { console.log('radio发生change事件,携带value值为:', e.detail.value) } , switch1Change: function (e) { console.log('switch1 发生 change 事件,携带值为', e.detail.value) } , getData() { console.log(this.data.inputValue); } }) <form bindsubmit='doPost'> <view class='input'> <input placeholder="请输入内容1" name='username' confirm-type="done" type='text' focus="true" bindinput='doInput'/> <checkbox-group bindchange="checkboxChange" name='checkbox'> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group> </view> <radio-group class="radio-group" bindchange="radioChange" name="radio"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> <switch checked bindchange="switch1Change" name="flag"/> <button formType="submit">提交</button> </form> // pages/register/register.js Page({ /** * 页面的初始数据 */ data: { inputValue: '', /*inputValue*/ items: [ { name: 'USA', value: '美国', checked: 'true'}, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'TUR', value: '法国' } ] }, doInput: function (e) { console.log(e); this.setData({ inputValue: e.detail.value }) }, checkboxChange: function (e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) }, radioChange: function (e) { console.log('radio发生change事件,携带value值为:', e.detail.value) } , switch1Change: function (e) { console.log('switch1 发生 change 事件,携带值为', e.detail.value) } , doPost(e) { //获取form表单提交的数据 注意表单要定义名称 console.log(e.detail.value); } })

 

转载请注明原文地址: https://www.6miu.com/read-5039319.html

最新回复(0)