mui如何获取radio和checkbox的值，单选框的男女拿值

复选框HTMl页面

<div class="mui-content">
			<div style="display: flex;" id="fruit">
				<div class="mui-input-row mui-checkbox ">
					<label>西瓜</label>
					<input value="西瓜" name="Checkbox" type="checkbox" >
				</div>
				<div class="mui-input-row mui-checkbox ">
					<label>草莓</label>
					<input value="草莓" name="Checkbox" type="checkbox" >
				</div>
				<div class="mui-input-row mui-checkbox ">
					<label>苹果</label>
					<input value="苹果" name="Checkbox" type="checkbox" >
				</div>
			</div>
		</div>

复选框 JS

document.querySelector('#fruit').addEventListener('change', function(e) {
				console.log(e.srcElement.value)

			})

效果

---

radio男女拿值

<div class="mui-content">
			<div style="display: flex;" id="sex">
				<div class="mui-input-row mui-radio ">
					<label>男</label>
					<input name="radio" type="radio" value="0">
				</div>
				<div class="mui-input-row mui-radio ">
					<label>女</label>
					<input name="radio" type="radio" value="1">
				</div>	
			</div>
			
		</div>

JS

document.querySelector('#sex').addEventListener('change', function(e) {
				console.log(e.srcElement.value)
			
			})

效果