`

checkbox模仿radio

 
阅读更多 
<html>
<head>
<meta charset="UTF-8">
<title>checkbox模拟radio</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('form input[type=checkbox]').click(function(){
    var checkboxs = $('form input[type=checkbox]');
    checkboxs.each(function(){
        $(this).attr('checked', false);
    });
    $(this).attr('checked', true);
});        
});
</script>
</head>
<body>
<form name="form1" id="form" method="post" action="">
<input type="checkbox" name="a" />
<input type="checkbox" name="b" />
</form>
</body>
</html>
 

用复选框模仿单选框实现效果，Jquery控制，

其中each（）是获取全部的复选框，使他们成未选中状态，只有点击的这个复选框是选中状态。

 

分享到：
| IMG sprites 与CSS sprites
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    通过示例代码，我们可以看到如何为checkbox和radio控件设置自定义样式。实际上，这段代码使用了两个自定义的jQuery插件，分别是jquery-hcheckbox.js和jquery-hradio.js。这两个插件被用来为HTML中的checkbox和radio...

    自制单选（radiobox）和多选(checkbox)控件

    最近想学者用js做适合触摸的单选（radiobox）和多选(checkbox)控件，起因是：1、不想用就jQuery，因为用它就解决这么一个问题感觉有点像大炮打蚊子；2、想用css做出toggle switch那种感觉很困难，而且这种开关只支持...

    jQuery仿iPhone手机中的checkbox效果插件

    摘要:脚本资源,jQuery,仿iPhone,checkbox　iPhone-style buttons - jQuery仿iPhone手机中的checkbox效果插件，支持生动的动态特效，模仿的是iPhone的样式。用于checkboxes和radio两种控件，内置3种色彩样式，支持...

    css3和jquery实现自定义checkbox和radiobox组件

    当用户点击div元素时，利用jQuery来改变其样式或内部HTML，来模仿Checkbox和Radiobox被选中或未被选中的状态，并且可以加入动画效果，提升用户的交互体验。 通过以上步骤，我们能够创建出既符合现代网页设计趋势又...

    iPhone风格的单选框和复选框

    在iOS设备上，单选框（Radio Button）和复选框（Checkbox）通常采用独特的设计风格，以保持其用户界面的一致性和易用性。在Web开发中，开发者经常需要模仿这种iPhone风格来提高网站在移动设备上的用户体验。本文将...

    styleit:一个jquery插件，用于设置checkbox和radiobox的样式

    风格一个jquery插件，用于设置checkbox和radiobox的样式这可以通过svg / png或CSS3完成。选项将包括通过悬停和焦点监视相关标签，包括复选框的有效状态，以模仿复选框和单选框的本机工作方式

    jQuery模仿单选按钮选中效果

    单选按钮（Radio Button）允许用户在一组选项中选择一项，而复选框（Checkbox）则允许用户选择一个或多个选项。在某些情况下，为了提升用户体验，我们可能需要通过JavaScript或jQuery来改变这些表单元素的默认行为或...

    防京东商品详情页面头部选择栏

    每个选择项可以用`&lt;select&gt;`标签来创建下拉菜单，或使用`&lt;input type="radio"&gt;`或`&lt;input type="checkbox"&gt;`来表示多选或单选。例如： ```html 商品系列： &lt;!-- options here --&gt; 品牌： &lt;!-- ...

    final-form-material-ui:一组包装器组件，以方便将Material UI与Final Form一起使用

    可用栏位import { TextField , Checkbox , Radio , Select , Input } from 'final-form-material-ui' ;文本域import React from 'react' ;import { Field } from 'react-final-form' ;import { TextField } from '...

    包含表单到布局到CSS到图片到各种WEB开发资源大集合

    - **iPhone Style Radio and Checkbox**：另一款模仿iPhone风格的单选和复选框插件。 ### 二、日期选择器和其他UI组件 - **Zebra_Datepicker**：一个轻量级且功能强大的日期选择器插件，可以轻松地集成到网页表单...

    无限树Jquery插件zTree的常用功能特性总结

    在复选框模式下，chkStyle可以设置为checkbox或radio，radioType可以指定radio的分组范围，chkboxType用于关联父子节点间的勾选状态。checked配置项用于定义加载数据后节点复选框的勾选状态，这通常是通过后端数据...

    仿miui对话框，普通对话框，带EditText对话框，列表框，单选框，复选框，等等

    在对话框中使用复选框，同样需要创建一个`LinearLayout`或者其他布局容器，然后添加`CheckBox`实例。每个复选框可以关联一个事件监听器，以追踪用户的勾选状态。 为了实现仿MIUI风格的对话框，开发者需要自定义...

    复选框 实现 单选 全选

    例如，在一组复选框中，当一个被选中时，其他所有复选框都会自动取消选中，这实际上是在模仿单选按钮（Radio Button）的行为。在文件的部分代码中，并没有直接体现单选的逻辑，但可以通过修改`callCheck`函数中的...

    Silverlight基本控件介绍.doc

    RadioButton代表互斥选项，同一组内的RadioButtons只能有一个被选中。 二十三、TextBox 控件 TextBox用于接收用户输入的文本，支持文本编辑、多行显示等功能。 二十四、Ellipse 控件 Ellipse用于绘制圆形，与...

    基于jquery的iPhone风格的单选框和复选框.zip

    2. **jQuery选择器**: 用于高效地选取DOM元素，例如`$("input[type='radio']")`或`$("input[type='checkbox']")`，以便对单选框和复选框进行操作。 3. **jQuery事件处理**: 使用`.on()`方法绑定点击事件，实现点击后...

    仿淘宝产品选择框.、点击出现选择框

    我们可以使用`&lt;button&gt;`或`&lt;a&gt;`元素作为触发选择框显示的元素，然后用`&lt;div&gt;`或者其他容器元素来承载选择项，这些选择项可以是`&lt;input type="radio"&gt;`（单选）或`&lt;input type="checkbox"&gt;`（多选），并配合`&lt;label&gt;`...

    产品自主组装树形结构CSS实现(手机、电脑自适应)

    2. 展开与折叠：使用`:hover`、`:active`和`:checked`伪类，结合`input[type="checkbox"]`或`input[type="radio"]`来控制节点的展开和折叠状态。 3. 动画效果：运用`transition`属性添加平滑的过渡效果，使得节点的...

    微信小程序学习demo：表单练习.rar

    1. **表单组件**：在微信小程序中，常见的表单组件包括`input`（文本输入框）、`textarea`（多行文本输入框）、`checkbox`（复选框）、`radio`（单选按钮）、`picker`（选择器）等。这些组件可以单独使用，也可以...

    MFC Windows 界面编程基础.pdf

    - BS_PUSHLIKE：模仿Windows 95中的推钮行为，常用于单选或复选按钮。 - BS_LEFTTEXT、BS_RIGHTBUTTON：指定文本与图标在按钮上的位置。 2. 单选按钮（Radio Buttons） - BS_RADIOBUTTON：创建单选按钮时，不...

    js实现iPhone界面风格的单选框和复选框按钮实例

    在本实例中，我们将探讨如何使用JavaScript，特别是jQuery库，来实现模仿iPhone界面风格的单选框（radio）和复选框（checkbox）按钮。这个方法通过CSS样式和JavaScript事件处理来达到美观的效果，使传统的HTML表单...

Magicbox
Global site tag (gtag.js) - Google Analytics