clips 前端 js 单选按钮与输入框的配合变化

情形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');

}

巴特西

clips 前端 js 单选按钮与输入框的配合变化

最新文章

热门文章

巴特西

clips 前端 js 单选按钮与输入框 的配合变化

最新文章

热门文章

clips 前端 js 单选按钮与输入框的配合变化