http://www.w3school.com.cn/tags/tag_input.asp

以下是相关示例，转载 lfx_web：

<html>
<head>
<script src='jquery-1.9.1.min.js'></script>
<script>
window.onload = function(){
var dom_a = document.getElementById('a1');
var dom_b = document.getElementById("b1");
//alert("A="+dom_a.value+" || B="+dom_b.value);
}

//以下开始操作radio的取消和勾选
//原生js操作
function fn1(){
var dom_a = document.getElementById('a1');
var dom_b = document.getElementById("b1");
//勾选
dom_a.checked = true;
//dom_a.checked = 'false';
//dom_a.checked = 123;
//取消勾选
dom_b.checked = '';
//dom_b.checked = false;//取消勾选
//dom_b.checked = null;//取消勾选
//dom_b.checked = undefined;//取消勾选

}
//利用jQuery操作
function fn2(){
var jQ_a = $('#a2');
var jQ_b = $("#b2");
//勾选
jQ_a.prop('checked','abc');
//jQ_a.prop('checked','123');
//jQ_a.prop('checked','true');
//jQ_a.prop('checked',true);
//jQ_a.prop('checked',123);//数字可以
//jQ_a.prop('checked',-1);
//jQ_a.prop('checked',abc);//会报错,abc未定义 {所以预猜测checked只要有已定义的值即可实现选中(undefined代表未定义)}
//取消勾选
jQ_b.prop('checked','');
//jQ_b.prop('checked',false);
//jQ_b.prop('checked',null);
//jQ_b.prop('checked',undefined);//没有任何效果,不会报错
}

</script>
<style>
.own{
border:solid 2px red;
padding:20px 5px 20px 40px;
width:300px;
margin:80 0 0 500;
}
</style>
<head>
<body>
<!--
通过实验得知：
初始化让单选框选中有4种方法可以实现：
1、checked
2、checked='checked'(建议用此方法，此方法对浏览器可以有很好的兼容性)
3、checked='true'
4、checked=true
小提示：通过给checked属性复制,只要checked存在,
赋予任何值都可以初始化选中(eg:checked='aaa' 或 checked='false')
不赋值都可以实现初始化选中
测试成功案例：
[checked],[checked='checked'],[checked='true'],[checked=true],[checked='aaa'],[checked='false'],
[checked='undefined'],[checked=false],[checked=null],[checked=undefined],[checked=''],[checked='-1']

当有多个被选中时，最后选中的单选框为最后一个
-->

<div class='own'>
<label>A1</label><input id='a1' type='radio' value='1' name='test1' checked />
<label>B1</label><input id='b1' type='radio' value='2' name='test1' checked='checked'/>
<label>C1</label><input id='c1' type='radio' value='3' name='test1' checked='true' />
<label>D1</label><input id='d1' type='radio' value='4' name='test1' checked=true />
<button onclick='fn1()'>测试点击一下</button>
</div>

<div class='own'>
<label>A2</label><input id='a2' type='radio' value='1' name='test2' />
<label>B2</label><input id='b2' type='radio' value='2' name='test2' checked/>
<label>C2</label><input id='c2' type='radio' value='3' name='test2' />
<label>D2</label><input id='d2' type='radio' value='4' name='test2' />
<button onclick='fn2()'>测试点击一下</button>
</div>

</body>
</html>

<input>标签单、复选相关查询地址的更多相关文章

  1. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  3. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  4. Android布局——单复选框（今天上课的内容总结下）

    怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...

  5. Android之单复选框及Spinner实现二级联动

    一.基础学习 1.图形学真的很神奇啊....查了些资料做出了3D云标签,哈哈...其实直接拿来用的,我们要效仿鲁迅先生的拿来主义,嘿嘿~~3D标签云就是做一个球面,然后再球面上取均匀分布的点,把点坐标 ...

  6. 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...

  7. 8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...

  8. AngularJS（六）：表单-复选框

    本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾 ...

  9. python selenium单/复选框操作

    一.单选:radio 1.首先是定位选择框的位置 2.定位id,点击图标就可以了,代码如下(获取url地址方法:把上面源码粘贴到文本保存为.html后缀后用浏览器打开,在浏览器url地址栏复制出地址就 ...

随机推荐

  1. Gatling实战（三）

    无论是性能测试还是自动化测试,有一个很重要的点就是变量(参数化),因为真实环境是很少同时产生并发很高而且所有参数都一模一样的请求的,就算有这样的接口,开发肯定用缓存来挡了,这种一般不会是瓶颈,真正瓶颈 ...

  2. Web 前端编程运维必备

    Html 1.Html 标签初知 2.Html 标签种类 3.Html 符号 4.Html Title 标签 5.Html meta 标签 6.Html Link 标签 7.Html p 标签 8.H ...

  3. SAP abap 语句、命令 语法查询备用

    语句:碰到一个写一个 COLLECT语句用法 用于报表数据的合并计算,如果非数据字段值相等,那么数值字段值相加 内表可以不用排序 LOOP AT gtd_test into gth_test. COL ...

  4. 02_计算机网络的OSI七层（应表会传网数物）

    七层: 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 五层: 应用层 传输层 网络层 数据链路层 物理层 四层: 应用层 传输层 网络层 数据接口层 一.物理层(Physical Lay ...

  5. Java基础学习-Eclipse综述和运算符的使用

    1.Eclipse的概述(磨刀不误砍柴工)       -Eclipse是一个IDE(集成开发环境)         -IDE(Intergrated Development Environment) ...

  6. HTML与CSS的一些知识（二）

    续: 5.表单标签<form></form> 用于收集用户信息,统一提交到服务器 一般用input标签收集,再用提交按钮提交:input标签根据type属性值不同有不同的类型: ...

  7. Autowired(required=true)

    问题原因 没有实现类的接口上添加了@Autowired注解 问题解决 删掉@Autowired注解 bug详情 Description: Field userDAO in com.crab.servi ...

  8. error——Fusion log——Debugging Assembly Loading Failures

    原文 So...you're seeing a FileNotFoundException, FileLoadException, BadImageFormatException or you sus ...

  9. java在window下用cmd （javac、jar）命令行模拟Intellij IDEA软件生成jar包

    @@首先最重要的cmd命令: javac ,jar :使用如下(注意[.]不要输错): 1. javac编译: D:\MyWorkSet\idea_hadoop>javac -d .\out\p ...

  10. 《R语言入门与实践》第五章:对象改值

    本章将了如何对一个数据对象中的数据进行改动,分为以下方法: 直接改值 条件取值然后改值 直接改值 单个改值:vec[1] <- 1000多个改值: vec[c(1,3,5)] <- 100 ...