`

checkBox选中样式设置

    博客分类:
  • HTML
阅读更多
有的时候需要用到复选框,比如区域框内选择多个区域等等。
例如外卖服务区域,选择时为多选,且一般隐藏checkbox样式框。只留下label字体和设置的外边框来进行选中样式控制,以此来提高用户体验。
这时要对checkbox进行处理
我总结的一个方法就是根据checked去进行设置
例子:
<p>
      <input name="area" type="checkbox" value="1" id="check1"/>
       <label for="check1">桥西区</label>
 </p>
 这里我把checkbox和label写在p标签里,这样既可以实现点击文字选中。
选中后样式控制:
/*选矿*/
        .select-ul li p label,
        .type-list-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .type-list-ul li p label{width: auto;padding: 0 0.1rem;}
        .select-ul li p{
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.5rem;
        }
        .type-list-ul li p{
            /*padding: 0 0.1rem;*/
            height: 0.5rem;
            /* width: 1.5rem; */
            display: inline-block;
            line-height: 0.5rem;
        }
        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label{
            border-color: #FA8072;
            color: #FA8072;
        }
 总结就是我通过
 .select-ul li p input[type=checkbox]:checked + label{}
来控制样式,
一般区域选择都会使checkbox样式隐藏,只留下字体框,点击后变色来提高用户体验
 
 
拓展:

在做网页的时候一般会有一个需求:点击一段文字信息的同时选中某个checkbox

旧处理方式是在这段文字上加上点击事件触发checkbox的选中事

//jq中:
//选中
$("#ID").attr("checked","checked");
//不选中
$("#ID").removeAttr("checked");
//js中:
 var boxes = document.getElementsByName("test");
 boxes[i].checked = true;

这里提供一种便利的方法:

<p>
   <input name="fittype" type="checkbox" value="8" id="checkin8"/>
   <label for="checkin8">其他</label>
</p>

将input和label放在同一个标签p中同时lable的for属性的值等于input的id属性值就可以实现点击label同时控制input

分享到:
评论

相关推荐

    android中CheckBox加载自定义选中与未选中图片样式

    默认情况下,CheckBox的选中和未选中状态的图标是系统提供的,但有时为了满足应用的个性化需求,我们需要自定义这些图片样式。本篇文章将详细介绍如何在Android中实现自定义CheckBox控件,使其在四种选择状态下显示...

    html5 css3制作checkbox多选框选中样式特效

    本教程将详细讲解如何利用HTML5和CSS3来创建一个具有独特选中样式的checkbox多选框特效。 首先,HTML5的`&lt;input&gt;`标签用于创建交互元素,其中`type="checkbox"`属性定义了一个复选框。基本的HTML结构可能如下: ``...

    改变checkbox背景勾选样式

    在CSS中,我们可以通过设置伪类来改变`checkbox`的样式,因为浏览器的安全策略不允许直接操作`checkbox`的原生元素。通常,我们会结合使用`label`元素与`checkbox`进行关联,并通过`label`的样式间接影响`checkbox`...

    RadioButton和CheckBox自定义样式

    3. 设置属性:为了让自定义样式生效,我们需要在XML布局文件中使用自定义的View类,并设置相应的属性,如选中颜色、未选中颜色、边框宽度等。 4. 动态改变样式:在某些情况下,你可能希望在运行时改变控件的样式,...

    自定义CheckBox样式

    --这里是未选中,CheckBox的背景图--&gt; &lt;item android:drawable="@drawable/checkBtn_off" android:state_checked="false" android:state_enabled="true"&gt;&lt;/item&gt; 以上三步之后,实现CheckBox的样式自定义

    用WPF自定义CheckBox的样式(框框和钩钩)

    本篇主要聚焦于如何自定义CheckBox控件的样式,特别是改变其框框(边框)和钩钩(选中标记)的样式。 CheckBox是WPF中一个基础的复选框控件,通常用于用户可以选择或取消选择一个选项。默认情况下,CheckBox有一个...

    WFP 带图片CheckBox(使用同一样式,设置Tag更改图片源)

    标题"**WFP 带图片CheckBox(使用同一样式,设置Tag更改图片源)**"所指的就是一种方法,它允许我们使用相同的CheckBox样式,通过设置Tag属性来动态改变CheckBox的图片源。这种方法的优点在于,我们不需要为每个不同的...

    WPF 自定义CheckBox样式

    为了响应CheckBox的状态变化(如选中、未选中),我们需要添加Visual State Manager来控制不同状态下的显示。例如,当CheckBox被选中时,我们可以改变`FontIcon`的`Glyph`属性来展示选中状态的图标。 在实际应用中...

    checkbox多项选中及取消选中

    综上所述,实现 `checkbox` 的多项选中及取消选中,需要理解 `checkbox` 的基本用法,掌握JavaScript操作DOM属性的方法,理解 `attr` 与 `prop` 的区别,并灵活运用事件监听和样式控制。通过这些技术,你可以创建出...

    js实现翻页后保持checkbox选中状态的实现方法

    所以checkbox为false。...把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基

    简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解

    3. 全选逻辑:在事件处理函数中,遍历所有关联的`checkbox`,利用`checked`属性设置或清除它们的选中状态。 三、获取选中项数量 1. 计算选中项:使用`querySelectorAll`选择所有选中的`checkbox`,如`document....

    wpf checkbox样式

    在这个场景中,你提到的“wpf checkbox样式”指的是为CheckBox定制独特的视觉表现,特别是选中和未选中时显示为黄色的背景。 创建自定义的WPF CheckBox样式通常涉及到以下步骤: 1. **资源字典**:首先,你需要...

    bootstraps 复选框样式 优化 样式修改

    保持正确的`&lt;label&gt;`关联,并确保`aria-*`属性正确设置,以便辅助技术用户能理解复选框的状态和功能。 在进行样式修改时,一定要注意保持代码的可维护性和浏览器兼容性。使用模块化CSS方法(如Sass或Less)可以帮助...

    checkbox选中 全选 传值

    在IT行业中,"checkbox选中 全选 传值"是一个常见的交互功能,特别是在Web开发领域。这个功能涉及到用户界面(UI)设计、JavaScript编程、HTML和CSS等基础知识。下面将详细阐述这些知识点: 1. **Checkbox(复选框...

    自定义radio&checkbox;样式

    3. **使用`:checked`伪类**:通过`:checked`伪类,当Radio或Checkbox被选中时,可以改变关联元素的样式。 ```css input[type="radio"]:checked + label { /* 添加选中时的样式 */ } ``` 4. **利用伪元素`:...

    checkbox与radio好看的样式

    通常,这样的文件会包括通用样式、布局样式、组件样式等部分,其中针对 `checkbox` 和 `radio` 的样式可能会被单独封装在某个选择器内,以保持代码的模块化和易维护。 6. **HTML 结构与布局** "index.html" 文件是...

    纯CSS设置Checkbox复选框控件的样式(五种方法)

    下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS...

    改变checkbox样式插件

    为了实现动画效果,插件可能利用CSS的`transition`属性,使checkbox在被选中或取消时有平滑的过渡。例如,增加一个简单的背景色变化动画: ```css .circle-checkbox input:checked + span { background-color: var...

    Android中Selsetor基本使用三,选中时改变CheckBox背景

    Android中Selsetor选中时改变CheckBox背景,在开发中非常常用,我们通常会用到单选框,多选框,在实际项目中,默认的颜色不会满足我们的要求,所以,我们需要自己设置,这是我写的一个例子希望能和大家交流学习

    checkbox自定义样式

    然而,浏览器默认的`checkbox`样式可能不符合设计师的审美或者品牌风格,因此自定义`checkbox`样式变得尤为重要。本文将详细介绍如何在兼容IE浏览器的情况下实现`checkbox`的自定义样式。 首先,我们需要了解`...

Global site tag (gtag.js) - Google Analytics