开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js单选按钮不选中隐藏

在JavaScript中，如果你希望当某个单选按钮未被选中时隐藏某个元素，可以通过监听单选按钮的状态变化来实现。以下是一个简单的示例，展示了如何根据单选按钮的选中状态来显示或隐藏一个元素。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮控制显示隐藏</title>
</head>
<body>

<input type="radio" name="toggle" value="show" checked> 显示
<input type="radio" name="toggle" value="hide"> 隐藏

<div id="content" style="display: block;">
  这里是需要根据单选按钮状态显示或隐藏的内容。
</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有的单选按钮
  var radios = document.getElementsByName('toggle');
  // 获取需要控制显示隐藏的元素
  var content = document.getElementById('content');

  // 定义一个函数来根据单选按钮的状态更新元素的显示状态
  function updateDisplay() {
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked && radios[i].value === 'hide') {
        content.style.display = 'none';
        break;
      } else {
        content.style.display = 'block';
      }
    }
  }

  // 初始化显示状态
  updateDisplay();

  // 为每个单选按钮添加事件监听器
  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', updateDisplay);
  }
});

解释

HTML部分：创建了两个单选按钮和一个需要控制显示隐藏的div元素。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取所有的单选按钮和目标div元素。
- 定义updateDisplay函数来检查哪个单选按钮被选中，并据此更新div的显示状态。
- 初始化时调用updateDisplay函数设置正确的显示状态。
- 为每个单选按钮添加change事件监听器，以便在用户更改选择时更新显示状态。

通过这种方式，你可以根据单选按钮的选中状态动态地控制页面元素的显示与隐藏。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

单选按钮的取消与选中原

单选一...单选二...-- 第一点击时传入单选对象，执行else,把这个对象赋给tempradio，第二次点击时checkedRadio这个对象就等于tempradio这个对象，执行if tempradio.checked...=false; 又把tempradio 赋值为null, 然后不停的循环--> 在一个form中的单选按钮，同一个name都会只选中一个。

3.6K2 0

Js隐藏微信公众号分享按钮

//隐藏 document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() { WeixinJSBridge.call

11.7K5 0

前端Vue监听路由变化，点击页面内按钮跳转菜单更改导航菜单选中状态

监听,当路由发生变化的时候执行 beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！...(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } 使用场景：点击页面内跳转按钮...导航菜单选中在element中有个NavMenu 导航菜单组件在A菜单页面中，有一个按钮button组件，点击这个button跳转到B菜单页。...虽然页面已经跳过去了，但是导航菜单的选中状态并没有发生改变，还在A菜单上面。也就是default-active，还停留在A上。此时就可以在导航菜单的组件中去监听router。

5.7K2 1

js原生、jquery单选框radio总结（获取值、设置默认选中值、样式）

单选框 radio总结：一、页面样式截图：否使用label标签可以点击文字就能选中单选框或者是取消选择单选框...label标签的两种使用方法： https://blog.csdn.net/qq_40015157/article/details/110850331 二、js原生 1、js原生获取选中的值 var...、js原生设置选中 var tesObj = document.getElementsByName("killOrder"); //设置value值为0选中 for(var i=0; i < tesObj.length...radio").eq(2).remove(); 8.遍历radio $('input:radio').each(function(index,domEle){ //写入代码 }); 9.修改单选框样式

9.6K6 0

使用 CSS Checkbox Hack 技术制作一个手风琴组件

CSS Checkbox Hack 允许你通过复选框（Checkbox）是否选中（或单选按钮radio buttons）来控制某些特定的样式。...这里运用的是：checked 伪类选择器，其意思就是”如果选中了表单（复选框、单选按钮），则应用相关样式规则“ 我们通常隐藏表单控件，然后结合来控制复选框或单选框的选择，制作一些特殊的效果...基于上面的思路，整理后无需列表内容如下： 2、定义相关样式准备好上述的HTML内容后，我们来定义相关样式，首先我们需要隐藏我们的几个单选按钮，我们可以使用left属性，将其移除屏幕显示区域，示例代码如下...，这里我们先让所有的选项卡默认隐藏，后面我们会使用 Checkbox Hack 让选中的选项卡内容处于展示状态。...但是为了确保没有足够内容支撑时，手风琴效果不走样，我们需要进行一些样式上的特殊处理，效果如下图所示：我们需要在每个当前选中状态的选项卡里添加flex-grow: 1属性，并不是所有的选项卡，让当前选中的选项卡里占据所有剩余宽度

5.4K3 0

Online程序学习（二）

八、界面元素 1、按钮在PAI处理结果 2、文本控件 3、输入框控件 4、单选按钮成组设置Funcation Code,将多个单选按钮设置成一组选中需要设置成一组的单选按钮，右键单选按钮组定义...5、复选框默认情况下为不选中（通过赋值实现初始化为选中）可以关联Function Code实现功能 6、显示与隐藏选中复选框时，将输入框隐藏 IF GV_CHECKBOX = 'X'.

1.1K1 0

Web前端基础（07）

匹配所有选中的单选/多选/下拉选 $(“input:checked”) 匹配所有选中的单选和多选 $(":selected") 匹配所有选中的下拉选 ###修改页面元素相关创建及添加元素创建:..."> //先把所有二层ul隐藏 $("li>ul").hide(); //给第一层的所有li添加点击事件 $("body>ul>li").click(function(){...$(this).children().toggle(); //得到其他两个li里面的ul并且设置隐藏 $(this).siblings().children().hide();...,点击的时候删除按钮对应的这一行.....attr("checked")){ // 当前选中时需要设置不选中 $("input:first").attr("checked",false); }else{ //如果当前没有选中

5K2 0

小程序开发笔记

，就是进入某个页面后，页面中有一些选项，在初始状态下只展示第一项，并且该项默认处于选中状态，当选中该项的否时显示下一项，直到显示到选择最后一项，当选中的是除最后一项之外的每项的是时，隐藏后面的选项最终实现的效果如下...flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } /* 单选按钮样式调整...} ] } }, //单选按钮响应函数 onRadioChange: function (e) { //如果当前项选中的是否...(e.target.id) }); } } }) 以上选项都不选中这次小程序中还有一个需求，在多选中有一个以上选项都不选中按钮，当选中以上选项都不选中时...，之前选中的选项由选中状态变为不选中状态，当选中除以上选项都不选中的其他选项时，以上选项都不选中的选项变为不选中状态实现代码 wxml中的布局代码如下 <wxs src=".

4.2K2 0

【Vue.js——ElementUi】element-ui 组件二次封装（蓝桥杯真题-2276）【合集】

在浏览器中预览 index.html 页面效果显示如下所示：目标效果 element-ui 官网上具有单选功能的表格 demo 为：点击表格下方的按钮可以选中指定的某行数据。...效果如下：从上图可以看到表格的左边有一列单选组件，但是并未实现单选功能。现在需要我们完善 mytable.vue 文件中的 TODO 部分，实现点击某个单选组件选中该行数据的效果。...：点击该按钮时，调用 setCurrent 方法不传递参数，用于取消选择。...handleRadioChange(row)：当单选按钮状态改变时调用，调用 setCurrent 方法将当前选中的行设置为高亮。...编写方法：在的 methods 中编写处理逻辑，如设置选中行、处理单选按钮状态改变等。

871 0

解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

data-fixed-columns="true" data-fixed-number="3"> 含有data-show-columns="true"属性时会在右边显示可以切换列的按钮...结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns

5.7K4 0

checkbox(复选框)和radio(单选按钮)的区别与详解

选中和取消选中一个 checkbox(复选框) 后，再次点击它，即可取消选中选中一个 radio(单选按钮) 后，再次点击它，不能取消选中 <!...”和多选默认情况下（不设置name属性时），是点了几个 checkbox 就有几个 checkbox 被选中，所以严格来说，要实现 checkbox 的“单选”，就只能点击一个 checkbox，如果点击了多个...checkbox，就必有相应个数的 checkbox 被选中如果要实现只能同时选中一个 checkbox，可以用 js 代码来控制也就是说，checkbox 所谓的“单选”是不受其 name...默认情况下（不设置name属性时），也是点了几个 radio 就有几个 radio 被选中，并且选中后再次点击不可取消选中，除非重置或者刷新页面等但 radio 既然是单选按钮，肯定是可以实现单选的操作的...name 属性的值不相同来实现如果有三个 radio 按钮，前两个的 name 属性的值是一样的，但第三个和前两个不一样，则前两个 radio 按钮，只能同时选中一个，第三个 radio 按钮可以和第一个或第二个同时被选中

6K1 0

HTML实现加减乘除的计算器+JavaScrip小知识点

网页的计算机代码在下面，小伙伴们花点耐心， 1、form表单 form提交数据提交方式有两种：action提交路径，mothod提交方式提交方式有两种：get显示数据，post隐藏数据...， input：属性 name起名字，id唯一，checked单选框选中，selected下拉框选中，select下拉框，option列表选项，textarea文本域，text文本框，password...密码框，radio单选按钮，CheckBox多选框，submit提交按钮，image图片提交按钮,file文件提交 2、弹框 confirm确认框：例如：你登录一个网站，会有广告弹框，...()">+ function js(){} 5、根据标签id获取标签对象的语法 decument.getElemenByID(...head> //函数格式 function js

1.7K2 0

4. Vue基本指令

三. v-show指令 v-show很简单, 就是隐藏/显示元素隐藏了,但隐藏的结果是不同的. 我们来看看html代码 ?...3. v-model在checkbox中的使用 1) checkbox单选框案例: 是否同意协议选中注意: label的好处 input被包在了label中, 这样的好处是, 点击文字也可以选中和取消....总结: 单选: 只能选中一个值, v-model绑定的是一个值多选: 可以选中多个值, v-model绑定的是一个数组 6. v-model的修饰符 1.

8K1 0

如何隐藏流媒体EasyPlayer.js视频H.265播放器的实时录像按钮？

目前我们TSINGSEE青犀视频所有的视频监控平台，集成的都是EasyPlayer.js版播放器，它属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，包括WebSocket-FLV...所以，在集成TSINGSEE青犀视频的EasyPlayer.js播放器时，项目现场对视频的安全性要求也很高。...由于EasyPlayer.js的播放原理是先读取视频流地址，然后再解码播放，并不会对外展示流地址信息，所以安全性也较高。...同时，为了满足用户现场对视频播放有较高的安全性需求，EasyPlayer.js播放器上支持的录像下载功能也需要隐藏。针对以上需求，只需要在前端进行隐藏即可。...我们可在index.html里添加如下代码，即能实现隐藏：.icon-luxiang2 {display: none !

4092 0

js与jQuery的区别以及jQuery选择器和方法的使用

目录使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素基本方法 ---- js与jQuery代码对比 jQuery选择器：用来选中元素基本方法使用jQuery jQuery...：我们先来看一下怎么获取被选中的单选按钮的值怎么获取。...我们先给按钮添加一个点击事件，点击按钮获取被选中的单选框的value属性值。.../* 表单选择器 */ //给提交按钮添加点击事件 $("#ok").click(function(){ //获取表单中被选中的单选按钮的值 :radio表示单选按钮 :checked表示被选 //中的...我们以后统一用：confole.info(sex);然后在页面按F12选中控制台看输出结果多选按钮：多选按钮和单选按钮呢基本上是一样的，来我们对比着上面的写一下试试。

15.4K1 0

JavaWeb01轻松掌握HTML（Java真正的全栈开发）

value:定义标签值(默认值) size:定义输入字段的长度(密码框的宽度) maxlength:定义可输入最大的字符个数 radio:定义单选按钮(单选框或者单选按钮...-- input 标签 type=”radio“ 时为单选框或者单选按钮 name：规定单选框的名称，通过name进行数据传递,分组。 value：实际上提交的数据。 checked：默认选择。...-- input 标签 type=”radio“ 时为单选框或者单选按钮 name：规定单选框的名称，通过name进行数据传递,分组。 value：实际上提交的数据。 checked：默认选择。...其它常用属性: name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radio的name值必一样. value:定义标签值 checked:定义该标签默认被选中. checked=”checked... 标签位于文档的头部，不包含任何内容.

5.2K5 0

一、前端基础-html-form标签

2、表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。...-- password类型 1、用于密码输入 2、会隐藏输入内容 3、name属性的值作为键值对中的key传递给后端 4、输入的内容作为键值对中的value传递给服务器...-- button类型 1、仅仅是按钮，配合js使用 2、可以通过value属性设置按钮显示 --> 按钮"...，其中的label不能在页面被选中 3、通过option设置选项，选项内容在页面可以选中 4、提交时select标签中的name作为键值对的键传递给后端 5、提交时option标签中的...-- label 1、通常和input标签一起使用 2、将label中的字段和input中的输入框或者按钮关联（通过id），在点击label字段时会自动选中关联的input内容

7534 0

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

CSS Checkbox Hack 允许你通过复选框（Checkbox 或单选按钮radio buttons）是否选中来控制某些特定的样式。...这里运用的是：checked 伪类选择器，其意思就是“如果选中了表单（复选框、单选按钮），则应用相关样式规则” 我们通常隐藏表单控件，然后结合标签来控制复选框或单选框的选择，制作一些特殊的效果...然后我们创建相应的单选表单按钮，并为其分配 Value 相关的内容关键词： ?...2、定义相关样式准备好上述的HTML基本结构后，我们来定义相关的样式，首先我们需要隐藏上述的几个单选按钮表单，我们可以使用 left 属性，将其移除屏幕显示区域，示例代码如下： ?...最后我们来定义选项卡内容文本的内容样式，我们应该默认第一个选项卡的内容处于展示状态，其它选项卡隐藏，这里我们先让所有的选项卡默认隐藏，后面我们会使用 Checkbox Hack 技巧让选中的选项卡内容处于显示状态

3.2K2 0

Extjs-lesson4

❞ Ext.js 系列课程笔记「表单子项」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 1.TextField 1.1 展示 ?...; }; //提交按钮 //创建一个新的Button按钮对象 var btnsubmit = new Ext.Button({ text: "提交", //当用户点击的时候[即js中的onclick...，顾名思义不可见，因此无展示图例 ❞ 4.1 代码 //新建一个Hidden隐藏字段对象 var hiddenfield = new Ext.form.Hidden({ //名称，后端收到的信息为...: "性别", //宽度 width: 100, items: [ { //这个属性是设置单选的关键 //只有同一组 name 的单选按钮才能单选...", function(rdgroup, checked) { //获取单选框的选中值 alert(checked.getRawValue()); }); 7.CheckBoxGroup 7.1

4.8K1 0

Vue.js -表单控件绑定原

checkedNames: [] } }) 单选按钮 ...选中列表单选列表 <option...，因为显示的内容优先显示value的值而不是option的内容如果v-model表达初始的值不匹配任何选项（为空），select元素会以“未选中”的状态渲染...{ text: "three", value: "C" }, ] } }) 对于单选按钮...a: "your selected", b: "not select" } }) 单选按钮

5.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭