radio相关知识
-
jQuery操作radio、checkbox、select总结鉴于网上总结的资料排版差、总结混乱、版本陈旧,所以从新总结了一下常用的jQuery操作radio、checkbox、select,所用jQuery版本为 jquery-1.4.2.min.js 。以下,按三种表单元素分别总结:1、radio:单选框HTML代码:<input type="radio" name="radio" id="radio1" value="1" />1<input type="radio" name="radio" id="radio2" value="2" />2<input type="radio" name="radio" id="radio3" value="3" />3<input type=&q
-
css3实现radio选择效果该手记通过简单教程,实现如图所示的radio单选样式效果 html结构,div中包含一个radio单选框与一个指向该单选框的label标签 <div class='radio-check'> <input type='radio' name='test' id='test1'/> <label for='test1' class>苹果</label> </div> 初始化相关结构样式,设置div定位为relative,radio与label为absolute定位 .radio-check { position: relative; height: 35px; } .radio-check > input { position: absolute; left: 0; top: 0; width: 20px; he
-
jQuery操作radio,checkbox,select获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;获取值:文本框,文本区域:$("#txt").attr("value");多选框checkbox:$("#checkbox_id").attr("value");单选组radio: $("input[@type=radio][@c
-
JQuery操作radio实例 //1、获取选中的radio的值://使用元素选择器,再使用属性过滤器name='city',最后使用:checked选取被选中的元素。$("input[name='city']:checked").val();//2、给指定值的radio设置选中状态://给name="city"而且value="YangZhou"的radio设置选中状态。$("input[name='city'][value='YangZhou']").attr("checked",true);//3、取消name="city"的radio的选中状态:$('input[name="city"]:checked').attr("checked&q
radio相关课程
radio相关教程
- 6.3 <code><radio-group></code> 单项选择器 @change 属性,在 <radio-group>中的选中项发生变化时触发,内部由多个 <radio> 单选项目组成。实例:<template> <view> <radio-group class="radio-group" @change="radioChange"> <label class="radio" v-for="(item, index) in items" :key="item.name"> <radio :value="item.name" :checked="item.checked"/> {{item.value}} </label> </radio-group> </view></template><script>export default { data () { return { items: [ {name: '0', value: '小慕课'}, {name: '1', value: '大慕课', checked: 'true'}, {name: '2', value: '老慕课'} ] } }, methods: { radioChange (e) { console.log('radio发生change事件,携带value值为:', e.target.value) } }}</script>radio属性说明:包裹在 radio-group 下面的单选项目。属性名类型说明valueString 的唯一标识。被选中时, 的 change 事件会携带 的 valuecheckedBoolean当前是否选中disabledBoolean是否禁用colorradio的颜色
- 2.6. 单选框 把 input 的 type 属性设置为 radio则表示单选框,因为 input 标签是单标签,所有单选框的内容直接写在 input 标签后面,如果单选框有多个选项,则需要写多个 input 标签,且每个 input 标签必须添加 name 属性,否则不能成为一组的单选框(既可以选多个)。代码如下:<input type="radio" name='gender'> 男<input type="radio" name='gender'> 女<input type="radio" name='gender'> 保密效果如下:单选框可以添加 checked 属性,表示默认选中一项。代码如下:<input type="radio" checked> 男<input type="radio"> 女<input type="radio"> 保密效果如下:Tips:如果给多个单选框设置 checked 属性,则会默认选中最后一个设置 checked属性的选项。
- 3.5 单选按钮 592代码解释:上述代码,我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定,当 radio 改变选中状态时 isFree 也会发生改变。同理,我们在控制台通过 vm.isFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。
- 4.2 单选按钮绑定值 <input type="radio" v-model="pick" v-bind:value="a">// 当选中时vm.pick === vm.a代码解释:上述代码中,我们通过 v-bind:value 给 randio 指定选中的值,当 radio 选中时 vm.pick === vm.a。
- 8. 编写添加事项页面 <template> <el-form ref="form" :model="form" :rules="rules" label-width="180px"> <el-form-item prop="name" label="事项名称:"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item prop="date" label="事项截止时间:"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;" ></el-date-picker> </el-form-item> <el-form-item prop="type" label="事项类型:"> <el-select v-model="form.type" placeholder="请选择活动区域" style="width: 100%;" > <el-option label="学习" value="学习"></el-option> <el-option label="工作" value="工作"></el-option> <el-option label="游戏" value="游戏"></el-option> </el-select> </el-form-item> <el-form-item prop="urgent" label="是否紧急:"> <el-radio-group v-model="form.urgent"> <el-radio :label="1">是</el-radio> <el-radio :label="0">否</el-radio> </el-radio-group> </el-form-item> <el-form-item prop="content" label="事项详情:"> <el-input type="textarea" v-model="form.content"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button @click="cancel">取消</el-button> </el-form-item> </el-form></template><script>import { mapMutations } from "vuex";import { ADD_TODO } from "../store/types";export default { data() { return { form: { name: "", content: "", date: "", urgent: 1, type: "" }, rules: { name: [ { type: "string", required: true, message: "请填写待办事项的名称" } ], content: [ { type: "string", required: true, message: "请填写待办事项的详情", trigger: "blur" }, { type: "string", min: 20, max: 50, message: "长度限制在20-50个字符", trigger: "blur" } ], type: [ { type: "string", required: true, message: "请填写待办事项的称类型" } ] } }; }, methods: { ...mapMutations([ADD_TODO]), onSubmit() { this.$refs.form.validate(validate => { if (validate) { this.ADD_TODO({ ...this.form, isComplete: 0 }); this.$message({ message: "添加成功", type: "success" }); this.$refs.form.resetFields(); } }); }, cancel() { this.$refs.form.resetFields(); } }};</script>
- 2.3 单选框 和复选框比较类似,单选框也是用来作为选项的,不同的是单选框只能选择一个,但是是在一个单选框组内才行,同一个组的 name 值必须相同,定义单选框的方式是设置 type=radio:1018
radio相关搜索
-
radio
radiobutton
radiobuttonlist
radiogroup
radio选中
radius
rails
raise
rand
random_shuffle
randomflip
random函数
rangevalidator
rarlinux
ratio
razor
react
react native
react native android
react native 中文