<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框checkbox类似单选按钮radio</title>
</head>
<body>
<form method=post action="">
<input type="checkbox" name="aa" value="1">
<input type="checkbox" name="aa" value="2">
<input type="checkbox" name="aa" value="3">
<input type="checkbox" name="aa" value="4">
<input type="checkbox" name="aa" value="5">
</form>
<script src="js/jQuery-2.2.0.min.js"></script>
<script type="text/javascript">
$('input').click(function(){
var aa = document.forms[0].aa;
for(var i=0;i<aa.length;i++){
aa[i].checked=false;
}
this.checked=true;
console.log(this.value);
});
</script>
</body>
</html>

jq版本的checkbox有radio的单选效果（可得到value值）的更多相关文章

  1. radio按钮单选效果

    必须有name,并且是同一值,判断效果可用value值确定

  2. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. jq操作radio，设置选中、获取选中值

    <label><inputtype="radio"name="sex"value="1">男</label&g ...

  4. 论checkbox和radio的样式美化问题

    如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...

  5. jq 操作radio，设置选中、获取选中值

    <label><input type="radio" name="sex" value="1">男</labe ...

  6. html自定义checkbox、radio、select —— select篇

    上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...

  7. ztree点击文字勾选checkbox，radio实现方法

    ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...

  8. 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 ...

  9. 优化checkbox和radio，类似Bootstrap中的iCheck

    checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了. html结构:单选框为例,简单说明: 其 ...

随机推荐

  1. Zabbix告警脚本-微信

    1.weixin.sh [root@iot-svndata02 bin]# cat weixin.sh #!/bin/bash ###SCRIPT_NAME:weixin.sh### ###send ...

  2. 168. Excel Sheet Column Title (Math)

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...

  3. CentOS7 firewalld防火墙配置

    [root@ecs ~]# firewall-cmd --version       //查看版本0.3.9 [root@ecs ~]# firewall-cmd --state        //查 ...

  4. Js学习(3) 数组

    数组本质: 本质上数组是特殊的对象,因此,数组中可以放入任何类型的数据,对象,数组,函数都行 它的特殊性在于键名是按次序排列好的整数 从0开始,是固定的,不用指定键名 如果数组中的元素仍是数组,则为多 ...

  5. Linux下安装Hadoop

    第一步: Hadoop需要JAVA的支持,所以需要先安装JAVA 查看是否已安装JAVA 查看命令: java -version JRE(Java Runtime Environment),它是你运行 ...

  6. 代码之髓读后感——类&继承

    面向对象 语言中的用语并不是共通的,在不同语言中,同一个用语的含义可能会有很大差别. C++的设计者本贾尼·斯特劳斯特卢普对类和继承给予了正面肯定,然而,"面向对象"这个词的发明者 ...

  7. 状态机学习（六）解析JSON2

    来自 从零开始的 JSON 库教程 从零开始教授如何写一个符合标准的 C 语言 JSON 库 作者 Milo Yip https://zhuanlan.zhihu.com/json-tutorial ...

  8. PHPNow升级PHP版本

    PHPNow升级PHP版本 phpnow下载地址:http://www.jb51.net/softs/12868.html 1,先把PHP5.3.5下载下来,在官网我是没找到VC6的版本,只能从Goo ...

  9. ssms创建链接服务器

  10. 基于akka-http搭建restfull框架

    1.scala开发环境介绍 2.scala插件的demo模板介绍 3.akka-http提供demo研究 4.添加路由机制解析 package org.netsharp.rest import akk ...