<!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. 2015-2016 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2015)

    题目链接 :  http://codeforces.com/gym/100781/attachments A-Adjoin the Network 题意大概是有多棵树(也可能是一颗),现在要把它们合并 ...

  2. 10.13 新版本go on~

    上午1.5 终审 and 排期 合同管理那边又是切换选项时各种联动,我第一想法是 好麻烦,不想做这个...第二想法才是给我做吧 锻炼锻炼我 然后 分任务的时候 分给我了,,哈哈 开心 虽然我没想躲 但 ...

  3. react项目的react-router-dom路由的使用

    现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...

  4. cookie、sesstion、strorage

    1. cookie 第一:每个特定的域名下最多生成20个cookie  (数量上) <IE6: 20    |   >ie7:50   |  firefox: 50     |   IE ...

  5. maven 监理web war 项目

  6. 微信小程序开发 - 用户授权登陆

    准备:微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:htt ...

  7. 23. pt-slave-delay

    略过,用原生的延迟复制: stop slave; change master to master_delay=5; start slave;

  8. nc 画界面,触发效果(第一种)

    package nc.ui.hzctr.sellctr.action; import java.awt.BorderLayout; import java.awt.Dimension; import ...

  9. CentOS7:ifconfig command not found解决

    https://blog.csdn.net/dandelion_drq/article/details/53503487

  10. 去掉input[type="number"]的默认样式

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...