一个小总结

<!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. javascript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascr ...

  2. Unity3D使用mesh创建一个正方形

    using UnityEngine; using System.Collections; public class Quad : MonoBehaviour { // Use this for ini ...

  3. 已经包含了#include <atlcom.h> #include <comutil.h>还是报错

    在WTL工程的.h中 #include <atlbase.h>#include <atlcom.h>#include <atlcomcli.h>#include & ...

  4. -webkit-filter是神马?

    这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它.   现在规范中支持的效果有:   - grayscale ...

  5. C语言学习 —— 字符串的学习（一）

    这是本人在学习 C语言有关 字符串内容 时的相关笔记 由于本人技术有限,如有错误,还望指正 C语言中数据类型中只有 字符型(char),而 char型 变量一次只能存储一个字符,在日常工作中经常需要定 ...

  6. Java安全学习

    http://blog.csdn.net/wbw1985/article/details/5506515 http://blog.csdn.net/wbw1985/article/details/60 ...

  7. Android Studio设置自动编译工程

  8. 魔兽世界---屠夫（Just a Hook）

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  9. Eclipse无法识别(手机)设备的解决方案

    遇到问题 开始学习android一个多月了,用Eclipse开发,用android手机调试.之前一直好好的,突然Eclipse无法识别手机设备了.纠结了好久,找了各种解决方法,弄了一晚上终于解决问题了 ...

  10. 利用虚拟光驱实现 将WINDOWS文件供虚拟机中的UBUNTU共享

    此方法只能实现(至少目前我发现只能这样)将文件传递给虚拟机中的ubuntu 中,供ubuntu系统阅读,拷贝等,但不能将ubuntu中的数据传递给windows. 即:每次更新windows的数据到u ...