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>

//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();