开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Jquery显示/隐藏div onclick单选按钮-根本不起作用

JQuery是一个流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画效果等操作。在处理单选按钮的显示和隐藏时，可以使用JQuery的相关方法来实现。

首先，需要确保已经引入了JQuery库，可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

接下来，我们可以使用JQuery的click()方法来监听单选按钮的点击事件，并根据选中状态来显示或隐藏目标div元素。具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <input type="radio" name="toggle" id="show" checked>显示
  <input type="radio" name="toggle" id="hide">隐藏

  <div id="target" class="hidden">
    这是要显示/隐藏的内容
  </div>

  <script>
    $(document).ready(function() {
      $('input[name="toggle"]').click(function() {
        if ($('#show').is(':checked')) {
          $('#target').show();
        } else {
          $('#target').hide();
        }
      });
    });
  </script>
</body>
</html>

在上述代码中，我们创建了两个单选按钮，一个用于显示，一个用于隐藏。目标div元素的初始状态为隐藏，通过给它添加.hidden类来实现。当单选按钮被点击时，通过判断选中状态来调用JQuery的show()或hide()方法来显示或隐藏目标div元素。

这样，当用户点击单选按钮时，目标div元素就会根据选中状态进行显示或隐藏。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，这里无法给出相关推荐。但是腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以通过访问腾讯云官方网站来了解更多相关信息。

相关搜索:jQuery onclick显示/隐藏多个div -隐藏额外的div 选择单选按钮后显示/隐藏div 单选按钮选择时显示/隐藏div 根据单选按钮选择显示/隐藏div 在angular 8中显示隐藏div onClick动态添加的单选按钮隐藏和显示多个div onclick jQuery - WordPress 如果选中单选，则Jquery显示隐藏div Xpages:根据单选按钮值隐藏/显示div 如果选中单选按钮，则显示隐藏div 单击单选按钮时，隐藏的div不会隐藏/显示 Jquery根据单选按钮和选择选项显示和隐藏div 在jQuery中使用单选按钮显示/隐藏最基本的div 隐藏-使用单选按钮取消隐藏div 显示和隐藏div onclick Javascript显示/隐藏div onclick jquery显示隐藏div Jquery:使用count隐藏单选按钮纯CSS单选按钮显示/隐藏单独的DIV层选择其他单选按钮时隐藏DIV 选中后更改单选按钮根本不起作用

相关搜索:

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

有帮助

没帮助

相关·内容

jquery 默认隐藏div,点击按钮显示，再次点击隐藏

html 代码： div id="exPara" style="display:none"> 22222222 div> jquery 代码

8.9K3 0

JQuery 操作CSS使DIV显示或者隐藏

在某些需求中，你需要点击按钮显示某个div，并隐藏已经显示的按钮。同时点击另外一个按钮，又会隐藏已经显示的，并显示已经影藏的。

4.1K1 0

点击按钮平移隐藏与显示div（使用translate）

[endif]--> div class="content"> div class="leftDiv" id="leftDiv">...div> jquery/2.1.1/jquery.min.js"> div class="content"> div class="leftDiv" id="leftDiv">..." class="changeBtn">切换 div> div class="right-content"> ...> div> jquery/2.1.1/jquery.min.js"> <script

4.1K2 0

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解。...div的显示和隐藏，但是隐藏后页面显示空白，功能也消失。...通过这些效果可以看出来，原来的这个按钮的位置表现为空白了，但是所占的位置还是存在的。...从性能角度分析：第一种方式性能更高，用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了。 jQuery 使用jQuery的话就会更加的便捷了。...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

1020 0

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

> div data-role="content"> 点击按钮2，隐藏按钮1，并且将按钮2改为圆角点击按钮3，显示按钮1，并且将按钮2改为非圆角...隐藏按钮4，并且将按钮5改为圆角点击按钮6，显示按钮4，并且将按钮5改为非圆角 div data-role="controlgroup..." onclick="showA();return false;">我是按钮6 div> div> div data-role="footer" data-position...('click',function(){ //隐藏按钮1 $('#btn1').parent("div").css('display','none'); //给按钮2添加样式，使按钮2...unbind().bind('click',function(){ //隐藏按钮1 $('#btn1').parent("div").css('display',''); //给按钮2

3.5K3 0

大型项目技术栈第七讲 Chosen的使用

search_contains:true});是使用配置文件对下拉框初始化 2、初始化方法chosen配置选项默认值描述 allow_single_deselect false 设置为 true 时非必选的单选框会显示清除选中项图标...disable_search false 设置为 true 隐藏单选框的搜索框 disable_search_threshold 0 少于 n 项时隐藏搜索框 enable_split_word_search...Option” 单选框没有选中项时显示的占位文字 search_contains false 搜素包含项，默认从第一个字符开始匹配 single_backstroke_delete true 多选框中使用退格键删除选中项目...> div> onclick='updData();' value="更新数据"/> div> <script...my-chosen-select').on('chosen:ready', function(evt, params) { console.log("chosen组件完全实例化后事件/好像不起作用

4.2K4 0

2022年11月23日——jQuery——T1(基础选择器与表单选择器)

目录 jQuery简述 jQuery 基本功能核心符号网络引入本地引入显示与隐藏示例：示例二：示例3：一、基础选择器 id选择器示例： id选择器唯一性示例： class选择器： class.../jquery-3.4.0.min.js"> 本地引入 jquery-3.4.1.min.js"> 显示与隐藏示例： onclick="show()">jQuery操作 div id="show" style="display: none;"> jQuery的操作按钮，当点击jQuery按钮后会显示图片。 ...再次点击jQuery按钮即可将加载的图片收回。示例二： (1). Onmouseover事件是指将光标移至元素上产生的事件。 (2).

5.6K1 0

JQuery高级应用

动画三种方式显示和隐藏元素默认显示和隐藏方式 show([speed,[easing],[fn]]) ：显示参数： speed：动画的速度。...hide([speed,[easing],[fn]]) ：隐藏 toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示按钮隐藏div" onclick="hideFn()"> 按钮显示div" onclick="showFn...()"> 按钮切换div显示和隐藏" onclick="toggleFn()"> div id="showDiv" style...="width:300px;height:300px;background:pink"> div显示和隐藏 div> $("#showDiv").show("

5.9K3 0

JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

1 JQuery动画 JQuery有三种方式显示和隐藏元素： 1）默认显示和隐藏方式： --show([speed, [easing], [fn]]) --hide([speed.../js/jquery-3.3.1.min.js"> //隐藏div function hideFn(){ /*...div" onclick="hideFn()"> 按钮显示div" onclick="showFn()"> 按钮切换div显示和隐藏" onclick="toggleFn()"> div id="showDiv" style="width:300px;height:300px;background...:pink"> div显示和隐藏 div> ?

9.4K2 0

Web阶段：第五章：JQuery库

> Jquery动画基本动画 show() 显示隐藏的元素第一个参数是动画执行的时候...，隐藏状态就显示第一个参数是动画执行的时候，（单位是毫秒）第二个参数是动画执行完成时的回调函数淡入淡出动画 fadeIn() 淡入让隐藏可见 fadeOut() 淡出让可见消失 fadeTo...jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果 div> 练习：CSS_动画品牌展示需求： 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌...2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。...5):not(:last)").is(":hidden")) { // 如果品牌隐藏了，要显示的【显示全部品牌】 $("div div a span

26.3K2 0

脚本语言知识总结.

id="time1">div> div id="time2">div> 2.history 对象代表历史记录，常用来制作页面中返回按钮 div onclick="divclick();">onclick="aclick(event);">这个链接会触发两个事件执行div...² 设置表格除第一行以外显示为蓝色 ² 设置表格奇数行背景色黄色 ² 设置表格偶数行背景色绿色 ² 设置页面中所有标题显示为灰色 ² 设置页面中正在执行动画效果div背景黄色，不执行动画div... 添加 class属性，值为itcast ² 设置table所有可见 tr 背景色黄色 ² 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值 jquery-1.8.3.min.js"> $(function(){ // 为表单中所有隐藏域添加 class

5K13 0

第51次文章：JQuery高级

JQuery 高级一、动画 1、三种默认方式显示和隐藏元素 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,...2、滑动显示和隐藏方式 slideDown([speed,[easing],[fn]]) slideup([speed,[easing],[fn]]) slideToggle([speed,[easing...],[fn]]) 3、淡入淡出显示和隐藏方式 fadeIn([speed,[easing],[fn]]) fadeOut([speed,[easing],[fn]]) fadeToogle([speed...setTimeout（执行一次定时器）分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值使用 show/hide方法来完成广告的显示（3）代码实现 div，调用显示方法 $("#ad").fadeIn("slow"); } //隐藏广告 function adHide

3.6K3 0

全网最新、最全的jQuery核心知识，你真的不想点开看看嘛？

（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX 功能（5）文档手册很全，很详细（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期...$("#id,.class,标签名") jQuery基础知识总结 10.表单选择器表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。...")选取所有的多选框 $(":file")选取所有的上传按钮 $(":butten")选取所有的按钮 11.过滤器注意： jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系 jQuery...对象数组中dom对象的顺序和声明dom对象时的顺序保持一致 div>1div> dom1 div>2div> dom2 div>3div> dom3 $("div") == [dom1...13.2 第二组 13.2.1 hide函数 $(选择器).hide() : 将jQuery对象数组中所有 DOM 对象隐藏起来 13.2.2 show函数 $(选择器).show() : 将jQuery

5.9K1 0

jQuery中的常用内容总结(一)

input type="button" onclick="labelSelect()" value="标签选择"> 13 onclick="complexSelect..."):标签为div的父节点　　　　　　　样例：$('.2').parents('div'); childen():子节点　　　　　　　　　　　　　　　样例：$('.2').childen...稍后会讲)来说明结果的正确性：使用text();方法(取节点内的内容); OK,节点选择的内容大致说完了，下面说说节点操作和节点CSS操作==> 实际开发中对节点的常用操作有哪些呢，这里我理一理:节点的显示和隐藏...、取值、设置或修改参数、删除、设置或修改节点的CSS、选中的(单选、多选)、选取的(下拉)、提交... 　　...hide():节点的显示(等同于CSS中的display:none;) 　　show():节点的隐藏(等同于CSS中的display:block;) 　　attr("key","value"):给节点设置一个属性和属性值

1K3 0

jQuery框架实现元素显示及隐藏动画【附案例分析】

首先来看一个简单的动画效果图：我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作，所以上面显示和隐藏的也只是一个div，而并不是一个图片。...在jQuery框架中对元素对象进行显示和隐藏有三种方式，分别是“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。接下来我们就分别对这三种方法进行介绍。.../script> 按钮隐藏div" onclick="hideFn()"> 按钮显示div" onclick="showFn()"> 按钮切换div显示和隐藏" onclick="toggleFn...-- 下方正文部分 --> div id="content"> 正文部分 div> div> 效果如下：关于jQuery中元素对象显示和隐藏的动画讲解就到这里

6.4K2 0

jQuery 常用方法

Ajax 交互选择器符号$表示 jQuery 对象，$函数通常也被称为 jQuery 的工厂函数，jQuery 的操作基本上都以$( )开始，所有选择器都放在这个括号中，例如$("#title")将返回一个...:animated 集合元素 $("div: animated") 选取正在执行动画的 div> 元素表单选择器，利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素，总结如下：选择器...:checkbox 集合元素 $(":checkbox") 选取所有的复选框 :submit 集合元素 $(":submit") 选取所有的提交按钮 :image 集合元素 $(":image") 选取所有的图像按钮...:reset 集合元素 $(":reset") 选取所有的重置按钮 :button 集合元素 $(":button") 选取所有的按钮 :file 集合元素 $(":file") 选取所有的上传域 :...); 向上收缩隐藏 .slideUp(); 向下收缩显示 .slideDown(); 显示隐藏切换 .slideToggle(); 获取兄弟元素之后的第一个兄弟元素 .next();· 之后的所有兄弟元素

2.6K5 0

使用Sqlite3+Express.js+React实现在线答题（下）

2018-01-31 13-49-01屏幕截图.png 从服务器获取json数据我们需要用jquery，安装 npm install query 界面设计我们预想的操作界面是这样的（原谅我粗狂的画风^...导入 import React, { Component } from 'react'; import $ from 'jquery'; import '....'checkbox' : 'radio'; // 多选题使用checkbox，单选题使用radio，注意判断题也是单选 var selection_name = this.props.reamrk...=this.onClick.bind(this); } onClick(event) { this.props.onClick(event) // 提交事件传递给父部件 } render...} onClick={this.handleCheckClick} />div>div> } } export default App; OK。

3K2 0

WEB入门之十三 jQuery选择器

:password 匹配并获得所有密码框 :radio 匹配并获得所有单选按钮 :checkbox 匹配并获得所有复选框 :submit 匹配并获得所有提交按钮 :image...匹配并获得所有图片 :reset 匹配并获得所有重置按钮 :button 匹配并获得所有按钮 :file 匹配并获得所有文件域 :hidden 匹配并获得所有隐藏域下面通过一个示例来演示表单选择器的具体用法...4.1.7 可见性选择器可见性选择器比较简单，主要是通过显示/隐藏状态来获取和匹配元素的，详见表4-1-7。...表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是（）。...A. jQuery选择器中不能包含任何特殊字符 B. jQuery选择器可以包含空格 C. jQuery选择器支持转义字符二、上机练习数据库中的数据查询出来后，在前台用表格进行显示。

831 0

WEB入门之十三 jQuery选择器

:radio 匹配并获得所有单选按钮 :checkbox 匹配并获得所有复选框 :submit 匹配并获得所有提交按钮 :image 匹配并获得所有图片 :reset 匹配并获得所有重置按钮 :button...匹配并获得所有按钮 :file 匹配并获得所有文件域 :hidden 匹配并获得所有隐藏域下面通过一个示例来演示表单选择器的具体用法示例4.4 document.write("...4.1.7 可见性选择器可见性选择器比较简单，主要是通过显示/隐藏状态来获取和匹配元素的，详见表4-1-7。...表单选择器和表单属性选择器不能和其他选择器合用 D. :button选择器获得的按钮包括提交按钮和重置按钮 4. 下列关于jQuery选择器中特殊字符的说法错误的是（）。...A. jQuery选择器中不能包含任何特殊字符 B. jQuery选择器可以包含空格 C. jQuery选择器支持转义字符二、上机练习数据库中的数据查询出来后，在前台用表格进行显示。

821 0

jQuery学习笔记

最近在学习jQuery 不难只是有些东西容易忘特此记录之选择器按ID查找 // 查找div id="abc">: var div = $('#abc'); 按标签查找 var ps = $('...').children()//查找所有直接子元素 $('div').find('li')//所有后代元素操作DOM 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始...对象有“批量操作”的特点用于修改css比较方便如果是js还需要遍历的添加class属性在做过了几个案例中很多都需要添加class属性 addClass()添加属性显示和隐藏DOM jQueryshow...()和hide()方法上图获取到JavaScript之后将其隐藏显示同理获取DOM信息 jQuery可以获取DOM的高宽等信息 // 浏览器可视窗口大小: $(window).width();...remove()删除DOM节点事件 jQuery很多时候需要绑定事件来出发一些东西 on方法用来绑定一个事件 onclick //鼠标单机时触发 onmousemove //当鼠标指针移动到元素上时触发

1.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭