chckbox 实现单选效果（html）

最新推荐文章于 2022-12-21 08:59:47 发布
最新推荐文章于 2022-12-21 08:59:47 发布
阅读量1k 收藏 1
点赞数
分类专栏： javascipt 文章标签： 单选框 多选框
       note：在html <input> 标签类中的checkbox实现单选效果。
       在最近的开发项目中，客户要求使用小方格子实现“单选”功能，显然圆点的radio被out了，只能选择chckbox的方块样式，也在网上搜过，可能有点儿脑残，没有找到。
       废话不多说直接上代码：
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>checkbox实现单选效果</title>  
  6.     <script src="jquery-1.7.2.min.js"></script>  
  7.     <script>  
  8.         $(document).ready(function () {  
  9.             $('.sb').click(function () {  
  10.                 var typeThis = typeof ($(this).attr("checked"));  
  11.                 switch (typeThis) {  
  12.                     case "string":  
  13.                         if ($(this).attr("checked").toLowerCase()=="checked") {  
  14.                             $('.sb').each(function () {  
  15.                                 $(this).removeAttr("checked");  
  16.                             });  
  17.                             $(this).attr("checked",true);  
  18.                         }  
  19.                         break;  
  20.                     case "undefined":  
  21.                         $('.sb').each(function () {  
  22.                             $(this).removeAttr("checked");  
  23.                         });  
  24.                         break;  
  25.                 }  
  26.             });  
  27.         });  
  28.     </script>  
  29. </head>  
  30. <body>  
  31.     <input class="sb" type="checkbox" value="1"/>  
  32.     <input class="sb" type="checkbox" value="2" />  
  33.     <input class="sb" type="checkbox" value="3" />  
  34.     <input class="sb" type="checkbox" value="4" />  
  35. </body>  
  36. </html>
natalie86
关注
专栏目录
html checkbox 自定义美化方式
weixin_42078778的博客
08-11 3141
首先你的checkbox 要是继承了乱七八糟的jquery-mobile…..赶紧先去掉，这个东西以后会令人抓狂。css里面的继承很混乱，优先级很不清晰，jquery也很霸道，所以去掉丑陋的初始框是最佳策略。 然后先给你的checkbox 做点ui设计！！ 比如存成两张图片分别为： images/chkbox.png images/chkbox_after.png 然后附上两个css样式...
html 单选打勾效果,checkbox 实现单选效果（html）
weixin_28703451的博客
06-03 4588
note：在html 标签类中的checkbox实现单选效果。在最近的开发项目中，客户要求使用小方格子实现“单选”功能，显然圆点的radio被out了，只能选择chckbox的方块样式，也在网上搜过，可能有点儿脑残，没有找到。废话不多说直接上代码：ps：只是一个简单的demo。checkbox实现单选效果$(document).ready(function () {$('.sb').click(...
html:checkbox
Roger★L☆M☆J★
08-15 932
 html:check标签生成一个checkbox。这里的value值可以是true，yes或on。如果您要提交其它的值(如某种形式的标识)应该考虑使用html:multibox标签。注意:为了正确的处理没有选中的checkbox您必须在reset()中设置对应的属性为false。下面的代码示例了html:checkbox标签的用法，其中CheckboxForm中声明了三个boolean类
HTML复选框--checkbox
热门推荐
LeapMotion1的博客
10-10 3万+
本文转载自 http://www.cnblogs.com/kaituorensheng/p/4529113.html 在公司实际开发中，会经常遇到复选框全选、多选、统计选中个数的情况，所以总结研究了一些大神的帖子，汇总学习一下！1.原生JS代码checkbox要是属于同一组的，在复选框的属性内name=”mm”属性要写一致；var names=document.getElementsByNa
前端代码实现单选控制开关效果
alhhhhh_j的博客
04-11 270
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1..
自定义checkbox样式
sluck1988的专栏
06-24 597
在webkit下，若用CSS控制checkbox大小，只会改变其padding值，一个通用的方法是用JS+CSS+DIV模拟 实现思路：做两张图——一张选中的，一张没选的，加个隐藏的input，通过onclick事件来改变input值和图片 下面贴出示例代码，以抛砖引玉 代码及图片下载：http://download.csdn.net/detail/sluck1988/43897
Android利用GridView实现单选效果
01-05
1.实现如图所示的单选效果 由于Android提供的单选按钮radiobutton只能单行或单列显示，且样式并不美观，故可用GridView进行改造，实现单选效果，而要实现这样的效果重点就在GridView的适配器这块了。 首先是...
C#_winform_DataGridView_checkbox复选框_实现单选效果
01-06
本教程将详细介绍如何在`DataGridView`中实现复选框的单选效果。 首先，我们需要创建一个`DataGridView`控件，并在其列集合中添加一个复选框列。这可以通过代码或者设计时在界面上拖拽并设置列类型完成。以下是一个...
androidstudio最新版 实现ListView单选、多选效果最实用案例 亲试可用
11-18
ListView中有一个属性：android:choiceMode,对应三个可选值： * singleChoice 单选 * multipleChoice 多选 ...在ListView的布局中设置了android:choiceMode属性后，item布局需要实现checkable，才有选中效果。
checkbox 实现单选效果(html)
Hi Ronan
06-22 2950
在最近的项目开发中，需要实现checkbox的
chckbox多选
weixin_33758863的博客
06-11 233
1、HTML结构 &lt;input type="checkbox" name="test" value="1"/&gt;&lt;span&gt;1&lt;/span&gt; &lt;input type="checkbox" name="test" value="2"/&gt;&lt;span&gt
php使用check box
cjopengler的专栏
09-18 1703
if (isset($_POST['submit'])) { foreach ($_POST['todelete'] as $delete_id) { //这里是循环遍历这个数组 todelete 每一个值被设置成 $delete_id $query = "DELETE FROM email_list WHERE id = $delete_id"; mysqli_q
chkbox
yhh345814509的专栏
10-31 390
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" >     发现问题了木有                                                           usin
chckBox样式的修改
weixin_34060299的博客
07-05 1133
在Android开发中，系统自带的默认CheckBox由于比较简陋，可能难以满足部分人的审美需求，不过，Android具有很强的扩展性，自定义CheckBox其实也很简单。 1. Layout中定义CheckBox <CheckBox android:textSize="14.0sp" android:id="@id/my_checkbox" android:background="@...
18、HTML复选框checkbox
you can you up up up的博客
10-30 2万+
正常情况下，单选按钮只能实现选中一个的效果。例如爱好字段，这时用户想选择多个，就不能再使用单选按钮了，可以使用 HTML 中的复选框。复选框与单选按钮不同，用户通过点击就可以实现选中或取消，而且不限制选中的数量。 在 HTML 中，把 <input> 标签中的 type 属性设置为 checkbox 可以实现多选框的效果。具体语法格式如下： <input type="checkbox" /> 1. 复选框的常用属性 复选框的常用属性： checked ----用来规定在页面加载时
chechbox 的颜色android,CCheckListBox 怎么改变checkbox里字体的颜色呢？
weixin_32279335的博客
05-29 379
C/C++ codeDrawCheckbox(int nItem,int nSubItem,CDC *pDC,COLORREF crText,COLORREF crBkgnd,CRect& rect,XLISTCTRLDATA *pXLCD){ASSERT(pDC);ASSERT(pXLCD);if (rect.IsRectEmpty()){return;}GetDrawColors(nI...
Java Swing JCheckBox：复选框组件
unber的博客
12-21 1597
一个复选框有选中和未选中两种状态，并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框，该类的常用构造方法如下。
使用css修改input框中checkbox的样式
qq_27009517的博客
08-11 6022
概述 在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对input中的CheckBox进行设置。 实现效果 本文在设计时，希望达到以下效果，如图所示，每...
input标签中checkbox类型的相关操作总结
你就是我的世界
09-22 2万+
今天突然用到了input标签里的checkbox，发现还是有些概念不清不楚的，在这里总结一下。 一、checked属性 常用于input标签里type类型为checkbox和radio，是一个Boolean属性。规定在页面加载时预先被选定。可以通过js代码进行设置。 <input type="checkbox" name="hu" checked="checked"> ...
element UI el-checkbox 实现单选效果
最新发布
04-25
您好，关于您的问题，element UI 的 el-checkbox 组件本身不支持单选，但您可以通过使用 el-radio-group + el-radio 实现单选效果。具体实现方式如下： 1. 在模板中引入 el-radio-group 组件，并绑定 v-model 值： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值