一个小总结

<!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. Error 56: …… VPN Service has not been started

    vpn service在系统服务中名为Cisco System, Inc. VPN Service(cvpnd),异常情况下,该服务时停止的,并且手动启动该服务后没几秒,就被kill了.根据Zhiga ...

  2. Apache Tomcat Not Showing in Eclipse Server Runtime Environments

    In my case I needed to install "JST Server Adapters". I am running Eclipse 3.6 Helios RCP ...

  3. Quartz 2D官方文档翻译（持续更新中）

    转换  核心绘图模型定义了两个完全独立的坐标空间:用户空间,一个是代表文档页,和设备空间,另外一个代表本机设备的分辨率.用户空间坐标是与设备空间中像素分辨率无关的浮点数字.当你想要打印或者显示你的文档 ...

  4. 20151222--Ajax三级无刷新

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. ACCESS DLL加载错误

    如今还在用ACCESS 2003,太懒没办法,升到2010变化太大了,做个Access的转版挺麻烦的.况且大家都在使用2003,也就懒得搞了. 但问题是office 2003已经out了,(Offic ...

  6. 漫谈AOP开发之初探AOP及AspectJ的用法

    一.为什么需要AOP技术 AOP 是一个很成熟的技术. 假如项目中有方法A.方法B.方法C……等多个方法, 如果项目需要为方法A.方法B.方法C……这批方法增加具有通用性质的横切处理.   下图可以形 ...

  7. poj2459 Treasure Exploration （闭包+二分）

    这道题是让求派出机器人的最少数量,乍一看以为是简单的求最小路径覆盖,后来发现错了,因为有的点可以走多次,而二分中每个点只能走一次,所以要先用floyd进行传递闭包,然后用二分 #include< ...

  8. eclipse 异常Unhandled event loop exception

    出了这一类的异常问题,大都是一些图像优化软件插件等等. 出现的问题大都是,一些eclipse模块不显示,或者点击不反应,出现最多的次数是点击断点的时候. 我这里是Catalyst Control Ce ...

  9. 通过 IP 访问谷歌

    最近貌似谷歌都不能访问,对于我等经常使用谷歌的人说不是件好事,毕竟谷歌比百度专业,好在有解决办法: 1. 找到文件:C:\Windows\System32\drivers\etc\hosts 2. 把 ...

  10. PyCharm 2016.1 for Mac 激活方法分享

    内容如题,需要就参考一下,不需要请绕行!内容来自墙外我只是搬运工! 简单介绍一下步骤: 1.下载下面的压缩包并解压下来. http://files.cnblogs.com/files/korykim/ ...