input:checkbox多选框实现单选效果跟radio一样

最近遇到一个小小的问题，就是有时候我们使用单选radio的时候，会发现当我们选中一个之后，再也无法一个都不选了，即选中后没有取消的功能，此时便想到了功能强大的checkbox，但他是多选，怎么才能让他变成单选，效果跟radio一样呢，本菜鸟就自己写了个小程序，代码很简单，只有四行。

废话不多说，直接代码：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript" language="javascript"></script>
<title>无标题文档</title>
<script type="text/javascript">
$(function(){
$(":checkbox").click(function(){
if($(this).attr("checked")!=undefined)
{
$(this).siblings().attr("checked",false);
$(this).attr("checked",true);
}
});
});
</script>
<style>
span,input{float:left;}
input{ width:14px; height:14px;}
span{ margin-right:20px;}
</style>
</head>

<body>
<div>
<input type="checkbox" /><span>1</span>
<input type="checkbox" /><span>2</span>
<input type="checkbox" /><span>3</span>
<input type="checkbox" /><span>4</span>
<input type="checkbox" /><span>5</span>
<input type="checkbox" /><span>6</span>
<input type="text" /><span>7</span>
</div>
</body>
</html>

赞 (0)

相关推荐

  • CheckBoxList多选样式jquery、C#获取选择项

    复制代码 代码如下: .checkboxlist label { margin-right: 20px; } 复制代码 代码如下: var label; $("#ddlplatform input:checkbox:checked").each(function () { label += $(this).next().html(); }); 复制代码 代码如下: <asp:CheckBoxList ID="ddlplatform" runat="s

  • 用 Javascript 验证表单(form)中多选框(checkbox)值

    本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit function getCheckboxValue(checkbox) { if (!checkbox.length && checkbox.type.toLowerCase(

  • Java中checkbox实现跨页多选的方法

    最近要实现一个功能,就是checkbox跨页多选,在网上看了一下,资料很少,而且大多是不完全的.不过经过我的努力,终于做出来了. JSP页面: 1,定义三个Hidden变量: <INPUT type="hidden" name="all_selected"> <INPUT type="hidden" name="now_selected"> <INPUT type="hidden&quo

  • php一次性删除前台checkbox多选内容的方法

    复制代码 代码如下: SQL:$SQL="delete from `doing` where id in ('1,2,3,4')"; 数据用逗号隔开. 表单: 复制代码 代码如下: <form action="?action=doing" method="post"> <input name="ID_Dele[]" type="checkbox" id="ID_Dele[]&qu

  • checkbox 多选框 联动实现代码

    父类 复制代码 代码如下: <input type="checkbox" name="father" forcheckboxgroup="groupname1"/> 子类 复制代码 代码如下: <input type="checkbox" name="son" group="groupname1"/> 实现代码 复制代码 代码如下: <script type

  • Android checkbox的listView(多选,全选,反选)具体实现方法

    布局文件:[html]  复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="fill_parent"      android:layout_height=

  • input:checkbox多选框实现单选效果跟radio一样

    最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行. 废话不多说,直接代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • javascript动态添加checkbox复选框的方法

    本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"

  • ASP.NET中 CheckBox复选框控件的使用

    ASP.NET中 CheckBox复选框控件的使用

    我们可以使用两种类型的 ASP.NET 控件将复选框添加到 Web 窗体页上:单独的 CheckBox 控件或 CheckBoxList 控件.两种控件都为用户提供了一种输入布尔型数据(真或假.是或否)的方法. 这里我们单独使用CheckBox,先来看看它的属性 属性 描述 .NET AutoPostBack 规定在 Checked 属性已改变后,是否立即向服务器回传表单.默认是 false. 1.0 CausesValidation 规定点击 Button 控件时是否执行验证. 2.0 Che

  • yii实现CheckBox复选框在同一行显示的方法

    yii实现CheckBox复选框在同一行显示的方法

    本文实例讲述了yii实现CheckBox复选框在同一行显示的方法.分享给大家供大家参考.具体实现方法如下: yii 让CheckBoxList默认输出的是换行了,一个checkbox是换一行了,这样对有些设置就不合要求了,下面我们就来实现yii让CheckBoxList在同一行显示. Yii的checkBoxList是一列,如下图所示: 网上有人说 复制代码 代码如下: $form->checkBoxList($model,'like',array(1=>'篮球',2=>'羽毛球',3=

  • jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

    各种对下拉列表.文本框.复选框.单选框的jquery的相关操作.做为记录和收藏的最好方法. 遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

  • layui默认选中table的CheckBox复选框方法

    方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , title: '用户列表' , page: true //开启分页 , cols: [[ {type:'checkbox'} , {field: 'userName',sort: true, title: '用户名称'} , {field: 'account',sort: true, title:

  • php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法 复制代码 代码如下: <html xmlns="http://www.jb51.net/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>php获取 checkbox复选框值的方法</title> &

  • JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

随机推荐