错记-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能正常运行。