开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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元素就会根据选中状态进行显示或隐藏。

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

相关搜索:Javascript显示/隐藏div onclick jQuery onclick显示/隐藏多个div -隐藏额外的div Jquery:使用count隐藏单选按钮 jquery显示隐藏div Jquery根据单选按钮和选择选项显示和隐藏div Xpages:根据单选按钮值隐藏/显示div 单击单选按钮时，隐藏的div不会隐藏/显示单选按钮选择时显示/隐藏div 在angular 8中显示隐藏div onClick动态添加的单选按钮在jQuery中使用单选按钮显示/隐藏最基本的div

相关搜索:

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

有帮助

没帮助

相关·内容

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

html 代码： 22222222 jquery 代码

8.8K3 0

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

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

4K1 0

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

[endif]--> ... ..." class="changeBtn">切换 ...> <script

3.9K2 0

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

> 点击按钮2，隐藏按钮1，并且将按钮2改为圆角点击按钮3，显示按钮1，并且将按钮2改为非圆角...隐藏按钮4，并且将按钮5改为圆角点击按钮6，显示按钮4，并且将按钮5改为非圆角我是按钮6 <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 多选框中使用退格键删除选中项目...> <script...my-chosen-select').on('chosen:ready', function(evt, params) { console.log("chosen组件完全实例化后事件/好像不起作用

4.1K4 0

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

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

5.6K1 0

JQuery高级应用

动画三种方式显示和隐藏元素默认显示和隐藏方式 show([speed,[easing],[fn]]) ：显示参数： speed：动画的速度。...hide([speed,[easing],[fn]]) ：隐藏 toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示 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显示和隐藏 ?

9.4K2 0

Web阶段：第五章：JQuery库

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

26.1K2 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 常用方法

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

2.6K5 0

脚本语言知识总结.

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

5K13 0

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

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

6.4K2 0

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

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

9943 0

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

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

5.8K1 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} /> } } export default App; OK。

2.9K2 0

jQuery学习笔记

最近在学习jQuery 不难只是有些东西容易忘特此记录之选择器按ID查找 // 查找: 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

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

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

1.1K9 0

Spimes模板添加打赏按钮，实现对打赏区域自由开启关闭

本文转自规则之树因为最近一直在用TePass For Typecho插件，但是它的打赏区域太大太占地方，于是几个月前，出于顺手，我在我博客的模板加了一个打赏按钮，然后让打赏区域由访问者自己控制显示。...其实我以为只是个小修改吧，因为没啥难度啊，就是jQuery的隐藏显示方法，但是结果这几个月来问的人一大堆，看来还是写个教程稳妥点。...> 然后在模版的设置中，找到自定义CSS，写入如下代码，将打赏区域默认隐藏，并且打赏按钮变成红色： .btn_reward{display:none !...important;} 最后，添加支持打赏显示和隐藏的js，可以加在post.php靠底部的合适位置（我这里使用了原生js，主要是可能不是所有的模板都用了jquery，那么原生js还是最稳妥的办法）：...("div_reward").style.display = "none" } document.getElementById("div_reward").onclick = function

6672 0

python_day15_前端_jQue

// 表单选择器 $(':text').css('width','60px'); ? ...> 爬山全选 ...*111); $('ul').append($ele); }); --> 5 动画效果 5.1：显示隐藏...> 显示隐藏 <button class="toggle

6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭