首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 8中选中单选按钮时将类添加到父div

在Angular 8中,我们可以通过以下步骤在选中单选按钮时将类添加到父div:

  1. 在组件的HTML模板中,使用单选按钮并将其绑定到一个组件的属性。例如:
代码语言:txt
复制
<div [class.selected]="isButtonSelected">
  <input type="radio" [(ngModel)]="isButtonSelected">
</div>

这里,我们将一个名为isButtonSelected的属性与单选按钮的ngModel进行双向绑定,并使用CSS类selected来表示选中状态。

  1. 在组件的CSS文件中,定义用于选中状态的样式。例如:
代码语言:txt
复制
.selected {
  background-color: yellow;
}

这里,我们使用selected类来指定选中状态下的背景颜色为黄色。

这样,在用户选择单选按钮时,isButtonSelected属性的值会随之改变。当该属性为true时,父div会应用selected类,从而改变背景颜色为黄色。相反,当该属性为false时,父div不会应用该类,背景颜色保持默认状态。

这是一个简单的示例,您可以根据自己的需求进行定制。如果您希望了解更多关于Angular的内容,可以参考腾讯云的Angular产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web前端基础(07)

$(“div:nth-child(n)”) 匹配是div并且是第n个而且要求元素是子元素 n从1 开始 ###表单选择器 $(":input") 匹配所有表单中的控件 $(":password") 匹配所有密码框...$(":radio") 匹配所有单选 $(":checkbox") 匹配所有多选 $(":checked") 匹配所有选中的单选/多选/下拉选 $(“input:checked”) 匹配所有选中的单选和多选...$(":selected") 匹配所有选中的下拉选 ###修改页面元素相关 创建及添加元素 创建: var d = $("div id='xxx'>abcdiv>"); 后面添加: 父元素.append...; tr.append(deltd); //把tr添加到table里面 $("table").append(tr); }) //把创建出来的td添加到tr里面把tr添加到.../* if($("input:first").attr("checked")){ // 当前选中时需要设置不选中 $("input:first").attr("checked

5K20
  • 如何使用纯 CSS 制作四子连珠游戏

    名称相同的 radio按钮在未选中时都处于这种状态。哇,这是一个真正的初始状态!真正有用的是,选中后一个同胞元素也会对前者产生影响!于是我在游戏板上放置了 42 对 radio input。...:nth-child 选择器 “统计”父类中的子元素,包括所有类型,类、伪类等等。:nth-of-type 选择器 “统计”在父类中某类型的子类,不包括类或伪类。...我的想法是将一个玩家(黄色)的单选按钮连接到左边,并将另一个玩家(红色)的单选按钮连接到共享父容器的右边。...应用所讨论的技术使 radio input 的父容器在选中红色 input 时宽度加倍,在选中黄色 input 宽度变为原来的宽度。...单选按钮处于 :indeterminate 时是 invalid ,否则是 valid 。因此,我为每个输入添加了 required 属性,然后在表单上使用 :valid 伪类来检测平局。 ?

    2K20

    Angularjs基础(十)

    div>                               angular.module('myApp',[..." ng-checked="all">                    定义和用法             ng-checked 指令用于设置复选框(checkbox)或单选按钮...如果ng-checked 属性返回true ,复选框(checkbox) 或单选按钮(radio)将会被选中。         ...只有在 key 为 true 时类才会被添加。             如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。             ...ng-click 定义元素被点击时的行为        实例:按钮没次点击时,计数变量count自动加1;           <button ng-click ="count = count

    3.3K50

    JQuery选择器(中)

    :选取单前节点的父节点 @:选取属性,这个在之前说过了(属性选择器) nodename:选取节点下的所有节点 jQuery中的应用: 根节点是很少用到的,常用的如下面的例子: $("div/p")相当于...jQuery对象包装的DOM元素.如: $("div>Hellodiv>").appendTo("#body");//把div>Hellodiv>添加到body元素中...,搜索所有单选按钮 $("div",xml.responseXML):查询指定XML文档中的所有div元素 选择器来源可以是:作为上下文的DOM元素,文档或jQuery对象 还有两个:$.extend(...这个元素在匹配元素集合中的位置变为0,而集合长度变成1 gt(数字):将匹配的元素集合缩减为给定位置之后的所有元素 lt(数字):将匹配的元素集合缩减为给定位置之前的所有元素 上面三个的例子: $("div...这意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数

    2K90

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到);而 ng-bind 则是在 Angular 渲染完毕后将数据显示...被选中时才会加载,避免网络拥挤 当然也有缺点: DOM 重建本身费时间 如果 tab 下有 controller,那么每次该 tab 被选中时 controller 都会被执行 如果在 controller...里面调接口获取数据,那么每次该 tab 被选中时都会重新加载 各位读者自己取舍。...定义为Javascript的原型类,在html中直接绑定原型类的属性和方法 优点: 可以使用 Javascript 的原型类, 我们可以使用更加高级的 ES6 或者 TypeScript 来编写 Controller...在嵌套scope时,子scope如果想使用父scope的属性,只需简单的使用父scope的别名引用父scope即可。

    7.9K40

    java-GUI编程之AWT组件

    AWT中常用组件 基本组件 组件名 功能 Button Button Canvas 用于绘图的画布 Checkbox 复选框组件(也可当做单选框组件使用) CheckboxGroup 用于将多个Checkbox...组件组合成一组, 一组 Checkbox 组件将只有一个可以 被选中 , 即全部变成单选框组件 Choice 下拉选择框 Frame 窗口 , 在 GUI 程序里通过该类创建窗口 Label 标签类,...当创建一个滑动条时,必须指定它的方向、初始值、 滑块的大小、最小值和最大值。...,初始处于被选中状态,并添加到cbg组中 Checkbox male = new Checkbox("男", cbg, true); //定义一个单选框,初始处于未被选中状态,并添加到...(modal)两种,当某个模式对话框被打开后,该模式对话框总是位于它的父窗口之上,在模式对话框被关闭之前,父窗口无法获得焦点。

    3K10

    day 83 Vue学习三之vue组件

    -- 注意,这里选中之后,每个复选框的value属性的值会添加到v-model绑定的后面这个 checkedNames数组中,如果没有value属性,那么选中它时,添加的是null-->...-- 多选下拉框,v-model写在select标签中,选中某个option标签时,如果option标签有value属性,那么value属性对应的值会添加到v-model绑定的selected数组中,如果...option标签中没有设置value属性,那么选中option标签时,option标签的文本内容添加到v-model绑定的selected数组中 --> div id="example-6">...=== 'yes' // 当没有选中时 vm.toggle === 'no'       这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性,因为浏览器在提交表单时并不会包含未被选中的复选框...单选按钮: // 当选中时 vm.pick === vm.a      选择框的选项 <select

    3.8K30

    【译】W3C WAI-ARIA最佳实践 -- 表单

    在 Menu or Menu bar 中介绍了菜单元素所需的附加角色,状态和属性。 单选按钮组 单选按钮组,是一个可选中按钮的组合,被称为单选按钮,且在该组合中,只有一个按钮处于选中状态。...示例 单选按钮组示例使用动态tabindex 单选按钮组示例使用aria-activedescendant管理焦点 键盘交互 在单选按钮组获取焦点时: 如果有一个单选按钮被选中,那么焦点设置在这个按钮上...如果没有被选中的单选按钮,那么将焦点设置在第一个单选按钮上。 Space: 如果该按钮还没有被选中,则选中当前聚焦的单选按钮。...在某些浏览器中,如果没有选中任何一个单选按钮,使用 Shift+ Tab 将焦点移动到单选按钮组,焦点将会被放置在最后一个单选按钮,而不是第一个单选按钮。...示例 按钮示例:将可点击的HTML div 和 span 元素作为可访问命令和切换按钮的示例。 数值调节按钮 数值调节按钮是个将值限定在离散数值集合或范围的输入组件。

    8.3K30

    AngularDart4.0 指南- 表单 顶

    您在底部添加了一个提交按钮,其中有一些类用于样式。 你还没有使用Angular。 没有绑定或额外的指令,只是布局。...临时将另一个名为spy的模板引用变量添加到Name 标记,并使用它显示输入的CSS类。...添加一个清除按钮 将clear()方法添加到组件类中:lib/src/hero_form_component.dart (clear) void clear() { model.name = '';...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。 概要 Angular表单为数据修改,验证等提供支持。

    17.5K30
    领券