js 单选框 显示隐藏代码
时间: 2024-05-01 18:17:58 浏览: 7
好的,关于你的问题,以下是一个示例代码:
HTML部分:
```
<label for="checkbox">点我显示隐藏内容</label>
<input type="checkbox" id="checkbox">
<div id="content" style="display:none;">
这是要隐藏的内容
</div>
```
JavaScript部分:
```
var checkbox = document.getElementById('checkbox');
var content = document.getElementById('content');
checkbox.addEventListener('change', function() {
if(this.checked) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
```
这里使用了JavaScript来监听复选框的状态变化,根据状态来显示或隐藏内容。希望对你有所帮助。
相关问题
js点击单选框显示不同图片
你可以使用JavaScript来实现点击单选框显示不同图片的效果,具体实现步骤如下:
1. 给单选框和对应的图片设置相同的id,方便后面的操作。
2. 使用JavaScript获取单选框和图片的元素节点。
3. 给单选框绑定点击事件,当单选框被选中时,判断其value值,并根据value值来显示对应的图片,同时隐藏其他图片。
以下是示例代码:
HTML部分:
```html
<input type="radio" name="pic" value="pic1" id="pic1-radio">
<label for="pic1-radio">图片1</label>
<input type="radio" name="pic" value="pic2" id="pic2-radio">
<label for="pic2-radio">图片2</label>
<img src="pic1.jpg" alt="" id="pic1" class="pic">
<img src="pic2.jpg" alt="" id="pic2" class="pic">
```
CSS部分:
```css
.pic {
display: none;
}
```
JavaScript部分:
```javascript
// 获取单选框和图片的元素节点
const pic1Radio = document.getElementById('pic1-radio');
const pic2Radio = document.getElementById('pic2-radio');
const pic1 = document.getElementById('pic1');
const pic2 = document.getElementById('pic2');
// 给单选框绑定点击事件
pic1Radio.addEventListener('click', function() {
if (pic1Radio.checked) {
pic1.style.display = 'block';
pic2.style.display = 'none';
}
});
pic2Radio.addEventListener('click', function() {
if (pic2Radio.checked) {
pic1.style.display = 'none';
pic2.style.display = 'block';
}
});
```
当用户点击单选框时,会根据value值来显示对应的图片。注意,在CSS中,我们需要将所有图片的display属性设置为none,这样初始时所有图片都不会显示。
怎样让隐藏了的单选框显示出来
如果一个单选框被隐藏了,可以使用JavaScript来让它显示出来。可以通过获取该单选框的引用,然后设置它的display属性为"block"或者"inline-block"来实现。例如,如果该单选框的id为"myRadio",可以这样写:
```javascript
document.getElementById("myRadio").style.display = "block";
```
这样就将该单选框显示出来了。如果需要在用户点击某个按钮或者链接时触发显示操作,可以将上述代码放在对应的事件处理函数中。