我们经常看到一些点击选择特效:下拉框或者单选框,选择了不同的值,页面会进行相应的改变,这就是利用了change事件。今天总结的是radio单选框改变事件的原理。
要实现这样的效果,就要获取相应点击事件对应的改变。先看下一个简单的radio表单结构:
<div class="layui-form-item">
<label class="layui-form-label">通讯协议</label>
<div class="layui-input-block">
<input type="radio" name="Modbus" value="1" title="Modbus RTU" checked="">
<input type="radio" name="Modbus" value="2" title="Modbus TCP">
<input type="radio" name="Modbus" value="3" title="数据透传">
</div>
</div>
要实现点击radio不通知出现不同操作,首先想到的就是要获取这个radio选项:(示例通过jQuery操作,需要先引入jQuery文件)
$('input[type=radio][name=Modbus]').change();
上面代码不难理解,radio单选也是input的一个属性,通过input的类型type=radio确定是radio单选,再根据name=sex属性来确定是哪个radio。
$('input[type=radio][name=Modbus]').change(function() {
console.log(this.value)
if(this.value == 1||this.value == 2) {
//Modbus TCP Modbus RTU
//增加 采集频率 字段
} else if(this.value == 3) {
//数据透传
}
});
上述代码通过this.value获取radio点击项的值,判断是点击了哪个选项,通过判断再执行对应的逻辑代码,就可以实现内容的隐藏显示效果了。