通过radio和js控制div里的内容显示或者隐藏

最新推荐文章于 2023-07-22 21:22:56 发布
最新推荐文章于 2023-07-22 21:22:56 发布
阅读量4.3k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 前段代码 文章标签： radio css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/what_error/article/details/79040632
这篇博客介绍如何通过HTML的radio按钮和JavaScript（jQuery）实现内容的显示与隐藏。当选中id为'checkbox1'的radio时，显示.query_info类的元素；而选中id为'checkbox2'的radio时，则隐藏该元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html:

<input type="radio" id="checkbox1" checked="checked"/>是&nbsp;&nbsp;&nbsp;
<input type="radio" id="checkbox2"/>否

js:

//控制收件信息是否显示的jquery
    $("#checkbox1").click(function(){
        var s=$("#checkbox1").is(":checked");
            if(s){
                $(".query_info").css('display',"block");
                $("#checkbox2").removeAttr("checked");
            }
        })

        $("#checkbox2").click(function(){
            var s=$("#checkbox2").is(":checked");
            if(s){
                $("#checkbox1").removeAttr("checked");
                $(".query_info").css("display","none");
            }
        })

利用JavaScript通过单选框radio控制div的显示和隐藏
zhanjiashu的专栏
07-17 9253
通过单选框单击动作，实现某个div或多个div的显示和隐藏。实例如下： JavaScript代码如下： function divClick(){                  var show = "";        show = $("input[name='AdPrintMode']:checked").val();        switch (show){    
radio切换控制div显示_非常迷你的纯CSS3时间轴切换焦点图
weixin_39888049的博客
12-01 289
点击上方[网页设计自学平台]→右上角[...]→[设为星标⭐]这是一款基于jQuery的和CSS3的焦点图动画插件，插件非常迷你，功能也比较简单，它的特点是图片切换按钮类似一条时间轴，点击时间轴的圆圈即可切换到相应的图片。点击切换按钮时，按钮会出现渐隐渐显的发光特效，图片切换过程中整张图片过渡的效果非常柔和，并且图片描述也相应以动画的方式显示在图片上，是一款非常棒的CSS3图片切换组件。...
通过JS，选取radio时显示/隐藏table的功能
SungDy
08-09 1450
function selType(value){ //window.alert("你点钟"+value); if(value=='jisuan'){ table1.style.display="block"; table2.style.display="none"; table3.style.display="none"; }else if(value=='jux
radio控制显示隐藏_系统小技巧：揭开控制面板中程序入驻和隐藏之谜
weixin_39642761的博客
11-12 223
我们注意到，在安装了360安全卫士后，Windows 10控制面板中就会自动多出一个“360强力卸载”工具。那么，它是如何被添加进来的？如果我们要将自己常用的注册表编辑器或其他工具加入到控制面板，该如何实现？与此相反的是，还有一些系统组件本该存在于控制面板中，我们却在某些电脑的控制面板中找不到它们的身影，这些项目又是如何被隐藏的呢？下面我们解密这个过程。1. 控制面板 程序入驻任我行我们知道，一个...
用 CSS 隐藏页面元素的 5 种方法
Enweitech Software Works
06-13 849
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为absolute 然后将位置设到不可见区域。 你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场
layui radio单选框点击事件控制DIV内容的显示与隐藏
IF先生的博客
07-22 2098
根据单选框的选择内容来显示或隐藏相关的div.
用RadioButten或CheckBox实现div的显示与隐藏
09-05
首先，让我们看标题和描述中提到的关键点：使用RadioButtons或CheckBoxes来控制div的显示与隐藏。在这个例子中，我们有两个RadioButtons，分别代表"男"和"女"两个选项。当选中"女"时，显示包含"美女、才女"信息的div...
layui radio点击事件实现input显示和隐藏的例子
10-16
在这段JavaScript代码中，我们使用了jQuery的选择器和方法来获取当前选中的radio按钮的值，并根据值的不同来控制试用次数输入框的显示或隐藏。具体来说，当用户选中值为“购买”的radio按钮时，通过jQuery的hide方法...
JQuery DIV 动态隐藏和显示的方法
10-22
例如，当用户选择ID为`btnWeek`的单选按钮时，`$("#tt1").show()`会使得ID为`tt1`的DIV变得可见，而`$("#tt2").hide()`则会让ID为`tt2`的DIV隐藏。这种做法提高了用户界面的交互性，让用户可以根据自己的需求看到或...
js实现div层的显示与隐藏
10-17
使用js代码实现div层的显示与隐藏，主要是radio的属性。
div模拟radio和checkbox
06-01
可以通过媒体查询（media queries）调整div的大小和位置，使其在手机、平板和桌面等不同设备上都有良好的显示效果。 6. 兼容性处理 - 虽然现代浏览器通常对CSS和JavaScript的支持较好，但为了确保在旧版浏览器中的...
使用JavaScript在单选按钮上显示/隐藏控件单击
04-05
使用JavaScript通过单选按钮选择显示/隐藏标签控件。
radio控制div显示或隐藏的代码
ycs_0405的专栏
12-01 703
<html> <head> <title>测试</title> </head> <body> <form action="" method="get"> <input type="radio" name="role" id="role_1" value="1" checked>学生 <input type="radio" name="role" id="role_2" valu.
JQuery通过radio，select改变隐藏显示div
热门推荐
Thankdj
10-05 1万+
1）select下拉框控制div的隐藏与显示 function checkYear() { var selectValue = $("select[name='periodType']").val(); if(selectValue == 1){ $("#isPeriodYearHalf").hide();
单选框radio控制div的显示和隐藏
知否技术的博客
12-17 3388
$("#limit").css({"display":"none"}); $("input[type=radio][name='dateType']").change(function(){ var v = $(this).val(); if (v =="1"){ $("#limit").hide(800); }else{ $("#limit&quo
JQuery通过radio，select切换 div 隐藏或者显示
yangbaobao的博客
04-23 1774
后台json数据 { "Nr": "1", "interval": "每天", "item": "检查", "itemDesc": "机台是否正常使用", "itemResult": "正常使用/停机", "itemValue": "停机" } html //显示与隐藏 var isPermanentValue = $('inpu...
通过radio 显示和隐藏
z_play_du
04-08 3744
html> head> title>My Pagetitle> head> body> form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> div align="center">br> input type="radio" name="group1" value="Milk"> M
前端单选按钮radio的显示隐藏以及JS重置功能
hnczlzj的博客
03-09 5168
相关代码： $(".ret").click(function(){ $("#r_number").val(""); $("#r_address").val(""); $("#f_name").val(""); $("#f_line").val(""); $("#f_time").val(""); $("#f_country").val(""); }); });
js通过很多个radio控制图片的显示
最新发布
10-23
在JavaScript中，你可以通过给每个`<input type="radio">`元素关联不同的图片，并利用它们的`checked`属性来控制图片的显示。当你点击一个 radio 选项时，对应的图片会因为该选项被选中而显示，其他图片则隐藏。这是一个基本的例子： HTML部分： ```html <div id="image-container"> <img src="image1.jpg" class="hidden-image" id="image1"> <img src="image2.jpg" class="hidden-image" id="image2"> <!-- 添加更多图片 --> </div> <input type="radio" name="image-choice" value="1" id="img1"> <label for="img1">选择1</label> <input type="radio" name="image-choice" value="2" id="img2"> <label for="img2">选择2</script> <!-- 添加更多 radio 选项 --> ``` JavaScript部分： ```javascript document.querySelectorAll('input[type="radio"]').forEach(function(checkbox) { checkbox.addEventListener("change", function() { var selectedImage = document.getElementById(this.value + 'img'); document.getElementById('image-container').querySelector('.visible-image').classList.remove('visible-image'); selectedImage.classList.add('visible-image'); }); }); ``` 在这个例子中，`.hidden-image`类用于隐藏图片，`.visible-image`则是默认显示的样式。当用户选择一个radio时，相应的图片会被赋予`.visible-image`类，使其可见。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值