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

我如何向这个函数添加一个if #anders checkbox = checked,删除隐藏的类以显示<textarea #otherInput,并在未选中时删除它?

要向这个函数添加一个if条件,以检查#anders checkbox是否被选中,并根据其状态来显示或隐藏<textarea #otherInput>元素,可以使用以下代码:

代码语言:txt
复制
function toggleTextarea() {
  var checkbox = document.querySelector('#anders');
  var textarea = document.querySelector('#otherInput');

  if (checkbox.checked) {
    textarea.classList.remove('hidden');
  } else {
    textarea.classList.add('hidden');
  }
}

这个函数首先通过document.querySelector方法获取到#anders checkbox和#otherInput元素。然后,通过checkbox.checked属性来判断#anders checkbox是否被选中。如果被选中,就使用classList.remove方法移除#otherInput元素的hidden类,使其显示出来;如果未被选中,就使用classList.add方法添加hidden类,将其隐藏起来。

需要注意的是,上述代码中使用了一个名为hidden的类来控制元素的显示和隐藏。你可以在CSS中定义这个类的样式,例如:

代码语言:txt
复制
.hidden {
  display: none;
}

这样,当#otherInput元素拥有hidden类时,它将被隐藏起来;当移除hidden类时,它将显示出来。

至于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的推荐。但你可以根据自己的需求和实际情况,在腾讯云的官方网站上查找相关产品和文档。腾讯云提供了丰富的云计算服务和解决方案,可以满足各种应用场景的需求。

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

相关·内容

jQuery基本操作

addClass(class|fn) //概述 //为每个匹配元素添加指定名· class 一个或多个要添加到元素中CSS名,请用空格分开· function(index,class)...· class 一个或多个要删除CSS名,请用空格分开 function(index,class) 此函数必须返回一个或多个空格分隔class名,接受两个参数,index参数为对象在这个集合索引值...· class 一个或多个要删除CSS名,请用空格分开· function(index,class) 次函数必须返回一个或多个空格分隔class名.接受两个参数,index参数为对在这个集合中索引值...参数class描述 删除匹配元素所有 jQuery代码 $("p").removeClass(); 回调函数描述 删除最后一个元素上与前面重复class jQuery代码 $("...function(index,class,wsitch)[,switch] 1·用来返回在匹配元素集合中一个元素上用来切换样式一个函数·接收元素索引位置和元素旧样式作为参数· 2·一个用来判断样式添加还是移除

7.5K20

jQuery

对象 dom 对象数组 + JQuery 提供一系列功能函数。....class 根据给定匹配元素。 selector1,selector2,selector3 将每一个选择器匹配到元素合并后一起返回。...匹配所有 input, textarea, select 和 button 元素 :text 匹配所有的单行文本框 :checkbox 匹配所有复选框 :radio 匹配所有单选按钮 :checked...(子元素) find(selector) 搜索所有与指定表达式匹配元素。这个函数是找出正在处理元素后代元素方法。...hide() 将可见元素隐藏 toggle() 可见就隐藏,不可见就显示 以上动画都可以添加参数: ① 第一个参数就是显示 执行时间,毫秒为单位 ② 第二个参数就是动画回调函数(动画完成以后调用函数

10.8K20
  • 从零开始学 Web 之 jQuery(四)元素创建添加删除,自定义属性

    一、元素创建添加删除 1、方式一:以对象方式创建元素 append,appendTo :在被选元素所有子元素结尾插入内容(增加子元素)。...append 或者 appendTo 方式添加到另一个元素时候,相当于剪切。...但是操作元素是否选中 checked 属性不合适。 2、操作元素选中 checked 属性,推荐使用 prop 方法。...")); $("#r1").attr("checked", true); PS:attr 方法针对单选框和复选框是否选中问题操作复杂(选中返回值为 checked选中返回值为 undefined...语法: 元素.prop("checked"); // 获取这个元素是否选中 元素.prop("checked",true/false); // 设置这个元素选中或不选中 示例: <input type=

    2.2K30

    Web阶段:第五章:JQuery库

    ()就是调用这个函数1、传入参数为 [ 函数 ] :( function(){} ); 功能跟 window.onload一样。都是页面加载完成之后。...方法function函数中,有一个this对象, // 这个this对象是当前正在遍历到dom对象 this.checked = !...var $divEle = $('div:first'); $('#btn01').click(function(){ //addClass() - 被选元素添加一个或多个...第一个参数是 动画执行时候,(单位是毫秒) 第二个参数是 动画执行完成回调函数 hide() 隐藏可见元素 第一个参数是 动画执行时候,(单位是毫秒) 第二个参数是 动画执行完成回调函数...toggle() 可见就隐藏隐藏状态就显示一个参数是 动画执行时候,(单位是毫秒) 第二个参数是 动画执行完成回调函数 淡入淡出动画 fadeIn() 淡入 让隐藏可见 fadeOut()

    26.3K20

    Web 框架替代方案

    当任务被添加这个表单将通过克隆模板内容而被重复。 隐藏输入表示不直接显示数据,但用于样式设计和选择。 注意这个 DOM 是如何简洁没有在其元素中散布。...包括应用程序所需所有元素,合理层次结构排列。多亏了隐藏输入元素,你已经可以很好地感觉到以后文档中可能会有什么变化。 这个 HTML 不知道它将如何被样式化,也不知道到底与什么数据绑定。...添加一个辅助位,使它在任务被聚焦可见。...并在适当元素上设置一个 selected 。...选择在 CSS 中实现这个简单过滤器,显示它能走多远,但如果开始变得棘手,那么把移到模型中是完全有意义

    2.6K10

    JavaScript学习笔记(四)—— jQuery入门

    元素淡入与淡出 使用hide()与show()方法 show和hide方法可以接受参数控制隐藏过程.: show(speed,callback) speed参数规定显示隐藏速度: - slow...- fast - normal - 或者直接写数字,单位是毫秒,2000 callback是回调函数 使用fadeIn()方法 jQuery通过控制不透明度变化来实现淡入效果,并在动画完成之后出发一个回调函数...,并在动画结束后回调一个一个函数,这是就需要用到fadeTo()方法: - fadeTo(speed,opacity,callback); - opacity表示要调整到不透明度值,1表示完全不透明...var fTotal = 0; //对于选中复选项进行遍历 $(":checkbox:checked").each(function () { //获取每一个数量...").click(function () { var bChecked = this.checked; //如果选中显示子菜单 $(this).parent().find(".

    11.2K50

    Web APIs第二天

    事件是在编程系统内发生动作或者发生事情, 比如用户在网页上单击一个按钮 事件是在编程系统内发生动作或者发生事情, 比如点击按钮 click 2. 什么是事件监听?...小米搜索框案例 ①开始下拉菜单要进行隐藏 ②表单获得焦点 focus,则显示下拉菜单,并且文本框变色(添加) ③表单失去焦点,反向操作 //需求:当表单得到焦点,显示下拉菜单,失去焦点隐藏下来菜单 <...回调函数 如果将函数 A 做为参数传递给函数 B ,我们称函数 A 为回调函数 简单理解: 当一个函数当做参数来传递给另外一个函数时候,这个函数就是回调函数 点击...回调函数: 把函数当做另外一个函数参数传递,这个函数就叫回调函数 回调函数本质还是函数,只不过把当成参数使用 使用匿名函数做为回调函数比较常见 4. this环境对象 环境对象指的是函数内部特殊变量...Tab栏切换 ①点击当前选项卡,当前添加,其余兄弟移除, 排他思想 ②下面模块盒子全部隐藏,当前模块显示 //需求:点击不同选项卡,底部可以显示 不同内容 <div class="wrapper

    1.1K60

    动手练一练,用纯 CSS 制作一款侧滑显示留言面板网页组件

    好了,废话不多说,今天我们要做一个案例就是做一个常见例子:在不少网站右侧都有一个固定浮动留言图标,我们点击这个图标,就会侧滑显示留言内容面板。...今天这个例子,我们将使用纯CSS实现这个效果,这里我们将用到“CSS checkbox hack”技术,效果如下图所示: 一、创建 HTML 结构 基于上面的效果图,我们要创建三个元素,一个...这个特性是我们实现这个案例技巧之一,再结合 CSS checkbox 选择器进行留言面板显示隐藏,这样我们就可以摆脱 JS 来实现这个案例。...1、由于 checkbox 这个元素在案例中无需显示,我们只是用其特性结合 label 控制留言面板显示隐藏,因此我们需要将其移出可视区域,记住这里不能用隐藏属性(display:none)...四、使用CSS选择器,实现表单面板切换和隐藏 我们通过点击 checkbox 对应 label 标签进行切换和显示留言面板,这里我们用到了 :checked,以及 ~(后续同胞选择器)和 +(

    86510

    动手练一练,用纯 CSS 制作一款侧滑显示留言面板网页组件

    好了,废话不多说,今天我们要做一个案例就是做一个常见例子:在不少网站右侧都有一个固定浮动留言图标,我们点击这个图标,就会侧滑显示留言内容面板。...今天这个例子,我们将使用纯CSS实现这个效果,这里我们将用到” CSS checkbox hack“技术,效果如下图所示: 一、创建 HTML 结构 基于上面的效果图,我们要创建三个元素,一个 checkbox...这个特性是我们实现这个案例技巧之一,再结合 CSS checkbox 选择器进行留言面板显示隐藏,这样我们就可以摆脱 JS 来实现这个案例。...1、由于 checkbox 这个元素在案例中无需显示,我们只是用其特性结合 label 控制留言面板显示隐藏,因此我们需要将其移出可视区域,记住这里不能用隐藏属性(display:none)...四、使用CSS选择器,实现表单面板切换和隐藏 我们通过点击 checkbox 对应 label 标签进行切换和显示留言面板,这里我们用到了 :checked,以及 ~(后续同胞选择器)和 +(

    1K00

    JavaScript 编程精解 中文第三版 十八、HTTP 和表单

    text:一个单行文本输入框。 password:和text相同但隐藏了输入内容。 checkbox一个复选框。 radio:一个多选择字段中一个单选框。...在大多数浏览器中,这会显示与正常选择字段不同效果,后者通常显示为下拉控件,仅在你打开显示选项。 每一个选项会有一个值,这个值可以通过value属性来定义。...用户可以从选择字段中选择笔记并在中编辑笔记,并可以通过点击一个按钮来添加笔记。...从localStorage中读取不存在字段会返回null。 setState方法确保 DOM 显示给定状态,并将新状态存储到localStorage。 事件处理器调用这个函数来移动到一个新状态。...Object.assign选取第一个参数,添加所有更多参数所有属性。 因此,提供一个空对象会使填充一个新对象。 第三个参数中方括号表示法,用于创建名称基于某个动态值属性。

    3.9K20

    html标签详解

    1.http-equiv属性:相当于http文件头作用,它可以浏览器传回一些有用信息,帮助正确地显示网页内容,与之对应属性值为content,content中内容其实就是各个参数变量值。...标签 超链接标签 所谓超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。...表格最重要目的是显示表格数据。表格数据是指最适合组织为表格格式(即按行和列组织)数据。...:表单提交对应项值 type:类型 type="button", "reset", "submit",为按钮上显示文本年内容 type="text","password","hidden"...,为输入框初始值 type="checkbox", "radio", "file",为输入相关联checked:radio和checkbox默认被选中项 readonly:text和password

    2.6K110

    checkbox选中和不选中

    根据W3C最新规定,当复选框未被选中,post不会服务器提交值,这就导致了变量初始化问题。看网上有多少朋友添加隐藏形式来解决。如果有多个复选框,会增加很多代码。...* *找到了一个简单解决方案: 1.自动将值1设置为由jquery检查。 2.提交,执行getCheckBoxVal函数,遍历所有复选框,将选中设置为1。...3.将选中选项值设置为0,将复选框选项设置为选中,并保持选中状态确保将其提交到服务器。** * *该方法也适用于无线电组件。** $(文档)。...prop('checked ',true); }) 提交前执行GetCheckBoxVal(){//将选中复选框值设置为1,将选中复选框设置为选中,将值设置为0。...查找(' Input3360Checkbox ')。each(function(){//遍历所有复选框 如果($(这个)。prop('checked')==true){ $(这个)。

    1.9K30

    jq---方法总结

    后者是前者经过压缩处理后版本,去除了多余注释、空白字符等信息,并缩短了变量名称,减小js文件体积。建议你在生产环境中使用该文件,以便于用户浏览器能够更快地加载jQuery库。...password"); // 选取所有type为passwordinput元素 $(":checked"); // 选取所有选中radio、checkbox、option元素 $(":selected..."); // 选取所有选中option元素 $(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素) 五:将HTML字符串封装为jQuery...checked属性值 $("selector").prop("checked", true); // 设置所有匹配元素checked属性值为true(意即选中所有匹配复选框或单选框) $("selector...(); // 删除$A,但保留其绑定事件、附加数据等 $A.clone(); // 克隆一个$A 九:动画处理 $("selector").show(); // 显示隐藏元素,默认不带过渡动画效果

    3K20

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

    当它们都没有被选中,圆孔就被认为是空,当其中一个选中,相应玩家就会把他圆盘放进去。 当其中任何一个选中之后,应该把隐藏起来,避免出现两者都被选中状态。...这些 checkbox 是直接兄弟,所以如果选中一个之后,可以使用 :checked和相邻兄弟选择器(+)来隐藏两个元素。但是如果选中第二个呢?你可以隐藏第二个,但是怎么才能影响第一个呢?...仔细阅读了 MDN 上关于 :indeterminate 文档后发现 radio input 通用都有 indeterminate 状态。名称相同 radio按钮在选中都处于这种状态。...这个想法就是统计选中 input 数量,为偶数(0、2、4等)红色玩家移动,为奇数黄色玩家移动。很快就意识到一般兄弟选择器不能(也不应该!)按照想要方式工作。...解决了这个问题,确保获胜消息有一个白色背景,并在平局消息之上。还必须延迟绘制消息转换,这样它就不会与获胜消息转换混合。 ?

    2K20

    Html再学

    标签分行显示文本,换行 语法: xhtml1.0写法: html4.01写法:  输入空格 添加水平横线 ,为网页加入地址信息 一般网页中会有一些网站联系地址信息需要在网页中展现出来..."> 在新浏览器窗口打开链接 使用mailto在网页中链接Email地址 如果mailto后面同时有多个参数的话,第一个参数必须?...,当图像不可见(下载不成功),可以看到该属性指 定文本 title:提供在图像可见对图像描述(鼠标滑过图片时显示文本) 使用表单标签,与用户交互> <form action="服务器文件...,单选框、=<em>checkbox</em>,复选框 value:提交数据到服务器<em>的</em>值 name:为控件命名,以为后台使用 <em>checked</em>:当设置<em>checked</em>="checked",该选项默认选中 <form action...如何你在label标签内点击文本,就会自动触发此控件。就是说,如果用户选中该label标签,浏览器会自动将焦点转到相关表单控件上。

    1.9K60

    在 Vue 中创建自定义输入

    特别地,表单输入往往会有很多复杂性,我们希望把这些复杂性都隐藏在组件中,例如 自定义设计 、标签、验证、帮助消息等等,并且我们还要确保这些部分中一个都按正确顺序排列渲染。...了解 v-model 如何在原生输入上工作,主要侧重于单选框和复选框 默认情况下,了解 v-model 在自定义组件上工作原理 了解如何创建自定义复选框和单选,模拟原生 v-model 工作原理...v-model 是如何正常工作? 官方Vue文档 在这个话题上写得其实很不错,但是还有一些小盲点。无论如何,我们将会深入研究。...实质上, v-model 只是一个缩写指令,给我们提供了双向数据绑定,代码是否缩写就取决于使用输入类型。...当该复选框值包含在数组中, shouldBeChecked 为true ,否则为 false。updateVals将复选框中选中添加到数组,并且在取消选中删除

    6.4K20

    javaWeb技术第一篇之HTML

    --a标签:告诉浏览器当用户点击文字 ,打开隐藏资源(图片 网页) 文字 --> <a href="....* 属性<em>checked</em>:<em>选中</em> 标准 :<em>checked</em>="checked" 变态:checked或者checked="" 加上这个表示直接选中一个选项,一进入页面性别男就被选中 * select 下拉列表标签...* hidden:隐藏,一般是后续程序使用,隐藏是不想让用户去编辑 * 属性name:可以给单选/复选 分组/只要提交给服务端数据都必须加上name作变量名 * 属性checked:选中 标准...* hidden:隐藏,一般是后续程序使用,隐藏是不想让用户去编辑 * 属性name:可以给单选/复选 分组/只要提交给服务端数据都必须加上name作变量名 * 属性checked:选中 标准...-- textarea标签:告诉浏览器显示一个多行输入框 格式: 内容 </textarea

    59010

    项目开发知识盲区记录

    table渲染提供了一个后端接口参数 然而这个接口要求后端数据进行格式化处理,然而这个会和分页功能产生冲突导致分页失效。...设置为false,也就是同步; 2、在方法内ajax外设置一个全局变量,用这个变量去接收success函数返回值。...//当头部工具栏删除按钮被点击,获取被选中元素集合,进行批量删除操作 $("#topDelBtn").click(function () {...div,里边写一个隐藏table 记录一下,模仿layui在弹出框中写一个表格 ---- Layui中弹出层关闭后但是弹出层中内容依然显示在页面上,没有消失 原因:jquery 冲突 解决方法...attr—>自定义属性 prop—>固有属性 上图中例子,如果使用attr动态添加 checked=“checked”, 代码能增加上去,但页面不会有相应改变,但用prop就很完美的响应。

    6.9K32
    领券