Radio Checkbox Select 操作
一个小总结
<!DOCTYPE html> <html> <head> <meta name="description" content="[radio and checkbox]"> <meta charset="utf-8"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <label for="ra1">ra1 <input name="ra" type="radio" id="ra1" value="ra1" checked/> </label> <label for="ra2">ra2 <input name="ra" type="radio" id="ra2" value="ra2"/> </label> <label for="ra3">ra3 <input name="ra" type="radio" id="ra3" value="ra3"/> </label> <p>.</p> <label for="cb1">cb1 <input name="cb" type="checkbox" id="cb1" value="cb1" checked/> </label> <label for="cb2">cb2 <input name="cb" type="checkbox" id="cb2" value="cb2"/> </label> <label for="cb3">cb3 <input name="cb" type="checkbox" id="cb3" value="cb3"/> </label> <p>.</p> <select name="sel1" id="single"> <option value="op1" selected="selected">op1</option> <option value="op2">op2</option> <option value="op3">op3</option> <option value="op4">op4</option> <option value="op5">op5</option> </select> </body> </html>
JS
//radio默认选择 获取到对应的radio然后修改checked属性 document.querySelectorAll('input[type=radio]')[2].checked = true; document.querySelector('input[value=ra2]').checked = true; //:是jQ中的子元素过滤 OR 表单选择器 // 这里是表单选择器 // 子元素过滤选择器是 first-child之类 //这里是默认选择value值为ra2的那个 $('input:radio').val(['ra2']); //也可以修改checked属性 $('input[value=ra2]:radio').attr('checked', true); function getRadios(){ var radios = document.querySelectorAll('input[type=radio]'); for(var i = radios.length-1 ; i>= 0; i--){ console.log(radios[i].value + '-' +radios[i].checked); } console.log(); } getRadios(); //********************************************************** //对于checkbox也是如此 //PS querySelector和$('')都支持多属性选择器 // 这里是在原有选择项的基础上选中cb2 document.querySelector('input[value=cb2][type=checkbox]').checked = true; // 这句话不同 这不是在原有选择的基础上再选择cb2 cb3 //而是使这个name为cb的checkbox 默认值就是cb2 cb3 $('input[name=cb]:checkbox').val(['cb2', 'cb3']); $('input[name=cb][value=cb1]:checkbox').attr('checked', true); function getCheckbox(){ // jQ的表单的选择器很好 可以直接选择出 checked的元素 var cbs = $('input[name=cb]:checked'); $.each(cbs, function(idx, item){ console.log($(item).val()); }); cbs.each(function(idx, element){ console.log($(this).val()); console.log($(element).val()); console.log(element.value + '-' + element.checked); }); } getCheckbox(); //********************************************** var single = document.querySelector('#single'); //默认选择项 和HTML的默认选中方法一样 即先得到你想要选中的option 然后修改它的select值 var optDefault = document.querySelectorAll('option[value=op2]')[0]; optDefault.selected = true; //OR 这样根据顺序选择 single.options[2].selected = true; //jQ的方式很简洁 $('#single').val('op3'); function getSelection(){ //selectedIndex表示选中项的下标 然后从options中得到这个选中的option console.log(single.options[single.selectedIndex].value); console.log($('#single').val()); } getSelection();
