clips 前端 js 单选按钮与输入框 的配合变化
2015-06-17 15:58
281 查看
情形1:
一对单选按钮 一个输入框组
输入框组随单选按钮的改变而替换文字或执行其它
片段属于 介绍单选框的基本使用方式 :
1.单选框是有分类的,每个单选框有自己所属的组 从而一个页面可以拥有多组单选框而不互斥 同组内单选框互斥只能单选
单选框的name属性值标示了它所属的组 具体代码表现:name属性值相等
2.脚本处理时 可以在一个方法里,很方便通过value传递的值 得到想要的数据 或判断是否被选中
判断是否选中 还可用原生的 document.getElementById("radio1").checked=true; 判断,返回值 true or false;
情形2:
单选框与输入框 切换后能记住之前的输入
像情形1 这样的单选框 与输入框相关连的 可切换的页面组件
实现稍复杂一点的逻辑操作时,分开函数处理使一切逻辑变得清爽 最简
而不用浪费脑细胞考虑各种情形 加入各种判断 同时又能适应各种情形 更重要的是思路 而非(绕来绕去的)逻辑能力
一对单选按钮 一个输入框组
输入框组随单选按钮的改变而替换文字或执行其它
片段属于 介绍单选框的基本使用方式 :
1.单选框是有分类的,每个单选框有自己所属的组 从而一个页面可以拥有多组单选框而不互斥 同组内单选框互斥只能单选
单选框的name属性值标示了它所属的组 具体代码表现:name属性值相等
2.脚本处理时 可以在一个方法里,很方便通过value传递的值 得到想要的数据 或判断是否被选中
判断是否选中 还可用原生的 document.getElementById("radio1").checked=true; 判断,返回值 true or false;
//html 部分 <input type="radio" name="pick_way" checked="checked" value="self_pick" onclick="check_pick_way(this.value)"> <span style="vertical-align:text-bottom;">自提</span> <input type="radio" name="pick_way" value="send_pick" onclick="check_pick_way(this.value)"> <span style="vertical-align:text-bottom;" >配送</span> <p id="pick_addr">自提地址</p> <input id="receiver_address" type="text" name="receiver_address" value="xxxx" readonly="readonly" autocomplete="on"> //js部分 function check_pick_way(pick_way){ if(pick_way == 'send_pick'){ $('#pick_addr').html('配送地址'); $('#receiver_address').val(''); $('#receiver_address').removeAttr('readonly'); } else{ $('#pick_addr').html('自提地址'); $('#receiver_address').val('xxxx'); $('#receiver_address').attr('readonly','readonly'); } }
情形2:
单选框与输入框 切换后能记住之前的输入
像情形1 这样的单选框 与输入框相关连的 可切换的页面组件
实现稍复杂一点的逻辑操作时,分开函数处理使一切逻辑变得清爽 最简
而不用浪费脑细胞考虑各种情形 加入各种判断 同时又能适应各种情形 更重要的是思路 而非(绕来绕去的)逻辑能力
//html 部分 <input type="radio" name="pick_way" checked="checked" value="self_pick" onclick="check_pick_way(this.value)"> <span style="vertical-align:text-bottom;">自提</span> <input type="radio" name="pick_way" value="send_pick" onclick="check_pick_way(this.value)"> <span style="vertical-align:text-bottom;" >配送</span> <p id="pick_addr">自提地址</p> <input id="receiver_address" type="text" name="receiver_address" value="xxxx" readonly="readonly" autocomplete="on"> //js部分 var temp_addr; function check_send_pick(){ $('#pick_addr').html('配送地址'); $('#receiver_address').removeAttr('readonly'); $('#receiver_address').val(temp_addr); $('#receiver_address').focus(); } function check_self_pick(){ temp_addr=$('#receiver_address').val(); $('#pick_addr').html('自提地址'); $('#receiver_address').val('xxxx'); $('#receiver_address').attr('readonly','readonly'); }
相关文章推荐
- D3js-地图中标注地点
- css实现三角
- D3js-地图中标注地点
- CSS响应式web设计
- Reverse Nodes in k-Group
- JS里的工厂模式和构造函数模式
- JS仿淘宝网的星级评分
- jquery mobile+iscroll使用时关于页面不能操作input标签问题
- 12种不宜使用的Javascript语法
- 不同版本安卓控件的样式统一
- 陈怡暖:黄金白银小幅下跌,FED决议前料继续温和承压
- jsp页面自定义标签
- Creating a Ring Buffer
- 二、jQuery选择器
- AngularJS入门心得3——HTML的左右手指令
- 如何建立基于CocoaPods的ReactiveCocoa工程
- jQuery事件-表单事件
- Javascript之基本事件处理
- 浅谈javascript中的prototype
- [LintCode] Maximum Subarray Difference