一个小总结

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

Radio Checkbox Select 操作的更多相关文章

  1. jSP的3种方式实现radio ,checkBox,select的默认选择值。

    jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...

  2. 【TP3.2+onethink】radio+checkbox+select 空间 编辑页面选中，附录 js 返回上一页

    1.TP3.2框架 如何实现 [radio+checkbox+select 空间 编辑页面选中],说实话,比较繁琐,不咋地!! 不废话,上代码:(其中 XX_arr  变量一维数组) <div ...

  3. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  4. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  6. jquery radio、 checkbox、 select 操作

    转载:http://www.haorooms.com/post/checkandselect $("input[id^='code']");//id属性以code开始的所有inpu ...

  7. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是＝ value 的简写! val就是valu ...

  8. html自定义checkbox、radio、select —— select篇

    上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...

  9. html自定义checkbox、radio、select —— checkbox、radio篇

    前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...

随机推荐

  1. [树结构]平衡二叉树AVL

    平衡二叉树是一种二叉排序树,其中每一个节点的左子树和右子树的高度至多等于1,平衡二叉树又称为AVL树. 将二叉树节点的左子树深度减去右子树深度的值称为平衡因子BF,平衡二叉树上所有节点的平衡因子只可能 ...

  2. [C++]unordered_map的使用

    unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value. 不同的是unordered_map不会根据key的大小进行排序,存储时是根据key的ha ...

  3. QF——UI之UIViewController

    程序一经启动,AppDelegate的实例就会创建一个充满屏幕的window,它是App唯一的,一个App对应一个window.window是UIWindow类型的,继承于UIView,是种特殊的UI ...

  4. js获取input file完整路径的方法

    function getPath(){  //判断浏览器  var Sys = {};  var obj = document.getElementById("headImg"); ...

  5. chrome实现全浏览器跨域ajax请求

    如图,在chrome快捷方式上打开属性栏,在‘目标’栏加上后缀--disable-web-security --user-data-dir.即可实现在此浏览器上所有网页的跨域请求.

  6. Robot Framework中DatabaseLibrary应用

    DatabaseLibrary: 在RF的官网上,有DatabaseLibrary的下载链接,DatabaseLibrary有2个版本,Python和Java版.本人使用的是Python版本. 1.下 ...

  7. Oracle EBS-SQL (GL-5):从发票追溯到接收

    SELECT destination_type_code, distribution_line_number, line_type, amount,vat_code, tax_code_id, tax ...

  8. PHPExcel 多工作表 导出

    //浏览器输出excel header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ...

  9. 从麦肯锡到小黑裙－Project Gravitas |华丽志

    从麦肯锡到小黑裙-Project Gravitas |华丽志 从麦肯锡到小黑裙-Project Gravitas

  10. svn 问题汇总

    1.当删除了原来的仓库时,再次新建,更新版本时会出现这个问题: