一个小总结

<!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. GCD 的初步认识

    1.什么是 GCD? GCD为Grand Central Dispatch的缩写 (GCD)是Apple开发的一个多核编程的较新的解决方法.它主要用于优化应用程序以支持多核处理器以及其他对称多处理系统 ...

  2. mysql登录错误或者密码错误

    一.mysql登录错误 mysqladmin: connect to server at 'localhost' failed error: 'Access denied for user 'root ...

  3. 【转】MUD教程--巫师入门教程1

    <新巫师入门手册> 第一章:观念篇■ 内容提要:什么是巫师?怎样做一个巫师?如何做好一个巫师? 第二章:上手篇■ 内容提要:最简单的房间怎么写?NPC又怎么写?先看懂一些常用的参数? 第三 ...

  4. 不可综合的verilog语句分析

    前半部分转自http://www.cnblogs.com/Mrseven/articles/2247657.html,后半部分为自己测试结果. 基础知识:verilog 不可综合语句 (1)所有综合工 ...

  5. c 函数传入数组。

    php 里面 直接 count($arr); 一个函数搞定, c里面想判断下数组的个数却非常困难. 想到php是C写的,那看看他的函数怎么写的不就行了... 哦,天啊,,事实比我想的要复杂的多... ...

  6. FAQ:注册表_键值类型

    在注册表中,“键值项数据”可分为下面三种类型. 字符串值(REG_SZ) 该值一般用来作为文件描述和硬件标志,可以是字母.数字,也可以是汉字,但它是长度固定的文本字符串,最大长度不能超过255个字符. ...

  7. Python调用C/C++动态链接库的方法详解

    Python调用C/C++动态链接库的方法详解 投稿:shichen2014 这篇文章主要介绍了Python调用C/C++动态链接库的方法,需要的朋友可以参考下 本文以实例讲解了Python调用C/C ...

  8. Oracle EBS-SQL (SYS-19):sys-用户登陆纪录查询.sql

    select *  from fnd_user t  where t.user_name='user_name'

  9. Android 获取屏幕分辨率

    原文:Android 获取屏幕分辨率 得到一个屏幕尺寸的三种方法如下:        // 通过WindowManager获取        DisplayMetrics dm = new Displ ...

  10. C语言入门（9）——局部变量与全局变量

    变量有效性的范围称变量的作用域.C语言中所有的量都有自己的作用域.变量说明的方式不同,其作用域也不同. C语言中的变量,按作用域范围可分为两种,即局部变量和全局变量.   局部变量 局部变量也称为内部 ...