一个小总结

<!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. 大表建立索引引发enq: TX - row lock contention等待

    今天要给一张日志表(6000w数据)建立索引,导致生产系统行锁部分功能卡住 create index idx_tb_cid on tb_login_log(user_id); 开始执行后大概花费了20 ...

  2. org.springframework.transaction.CannotCreateTransactionException: Could not open Hibernate Session

    出错原因很简单:数据库服务没开,自然就打不开Session了.

  3. 《Oracle Applications DBA 基础》- 9 - Concurrent Processing[Z]

    <Oracle Applications DBA 基础>- 9 - Concurrent Processing================================== 参考资料 ...

  4. leetcode Longest Valid Parentheses python

    class Solution(object): def longestValidParentheses(self, s): """ :type s: str :rtype ...

  5. html5test

    html5test Github https://github.com/NielsLeenheer/html5test 主程序是 scripts/7/engine.js 目前看到的分类大部分是基于判断 ...

  6. 【Chromium中文文档】跨进程通信 (IPC)

    跨进程通信 (IPC) 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/I ...

  7. OSG事件回调

    OSG中的节点主要使用回调(CallBack)来完成用户临时.需要每帧执行的工作.根据回调功能被调用的时机划分为更新回调(Update CallBack)和人机交互时间回调(Event CallBac ...

  8. Python调用C/C++的种种方法

    Python调用C/C++的种种方法 2010-12-07 09:59 28433人阅读 评论(1) 收藏 Python是解释性语言, 底层就是用c实现的, 所以用python调用C是很容易的, 下面 ...

  9. Android关机流程源码分析

    上一篇文章Android 开关机动画显示源码分析详细介绍了开关机动画的显示过程,Android系统开机时,在启动SurfaceFlinger服务过程中通过Android属性系统方式来启动bootani ...

  10. poj1665

    #include <stdio.h> #include <stdlib.h> #define pi 3.1415926 int main() { float dia,tim; ...