• 错记-checkbox radio


    很多时候我想会用到浏览器默认的单选按钮或者复选框,比如说偷懒的时候或者心情不好的时候╮(╯﹏╰)╭,

    在html结构里我想实现点击文字旁边的单选按钮就跟着选中或反之,像这样:

    html代码就可以这样写了:<label><input type="radio" />javascript</label>,通过label标签自动关联这个事件。

    那么问题来了,如果是多个选项,我想点击其中的某个选项,其他的就默认不选中,该怎么写,复制上面的代码黏贴几行改了文字就行了吗,如果是我就不写下面的代码了,哈哈:

      <label><input type="radio" name="options" />javascript</label>
      <label><input type="radio" name="options" />Html5</label>
      <label><input type="radio" name="options" />css3</label>

    我需要用name这个属性把他们都关联起来,这样就能实现想要的效果了:

     

    有时候我想用js来控制复选框的选中状态,然后抄一下网上的句子:jQuery-比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。比如,selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值,像这样:

        $('input[type=checkbox]').prop('checked')    //获取
        $('input[type=checkbox]').prop('checked',true)    //设置
        $('input[type=checkbox]').prop('checked',false)    //设置
                
        //相当于原生js:
        alert(document.querySelector('input[type=checkbox]').checked);
        document.querySelector('input[type=checkbox]').checked=true;
        document.querySelector('input[type=checkbox]').checked=false;

     

     

    ●复选框事件:

    假设页面上的复选框为为选中状态,当点击checkbox的时候,是先有点击事件呢还是先有checkbox变成true的事件,实践证明是浏览器先默认给checkbox的checked变成了true,然后再执行checkbox的点击事件的,所以想这样写就坑了╭∩╮(︶︿︶)╭∩╮:

     

    ●浏览器后退的时候,类似input[type=text]一类的input,如果输入值,那么浏览器会保留用户输入的文字,这样有时就不是我想要的了,所以必要时需要初始化一下input的值,比如说我想页面一上来<input type="text" />的值是默认没有的,然后用户输了值的时候,执行某段js,这个值在js里用于判断,那么当浏览器后退的时候,这段js就有可能“失效”了,所以,可以在页面执行那段js前先初始化input框里的值(document.querySelector('input[type=text]').value=''),以保证js能正常运行。

  • 相关阅读:
    常用模块——time模块,datetime模块
    开发目录的规范

    模块
    day17作业
    面向过程编程
    函数递归
    谈谈作为一个菜B的培训感受
    絮叨机房精密空调的制冷剂
    接入机房产生冷凝水
  • 原文地址:https://www.cnblogs.com/barrior/p/4399861.html
Copyright © 2020-2023  润新知