我对 html 很陌生，并尝试根据用户是否选择一个选项来隐藏 Web 表单中的一些选项。例如，如果他们选择食品包装，则应隐藏自定义食品选项。这是可以在 html 中完成还是需要脚本？<div class="large-2 columns"> <label><b>Packages</b></label></div><!--column--><div class="large-10 columns"> <div class="large-3 columns"> <input type="radio" value="A" name="Package" checked><label>Standard Package</label> </div> <!--column--> <div class="large-3 columns"> <input type="radio" value="B" name="Package"><label>Luxe Package</label> </div> <!--column--> <div class="large-3 columns"> <input type="radio" value="C" name="Package"><label>Ultimate Package</label> </div> <!--column--> <div class="large-3 columns"> <input type="radio" value="D" name="Package"><label>Custom Package</label> </div> <!--column--></div>这是我用于选项的代码，我想要隐藏的区域也是 div。任何帮助深表感谢！
3 回答
万千封印
TA贡献1891条经验 获得超3个赞
你肯定需要一个同样的java脚本。希望这有效。
function onChange() {
const nodes = document.getElementsByName('Package');
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A', 'B', 'C', 'D'];
nodePostFix.forEach(node => {
document.getElementById('hidden-for-' + node).style.display = 'block';
});
//Hide the selected node
document.getElementById('hidden-for-' + selectedValue).style.display = 'none';
};
<div class="large-2 columns">
<label><b>Packages</b></label>
</div>
<div class="large-10 columns">
<div class="large-3 columns">
<input type="radio" value="A" name="Package" checked onchange="onChange()"><label>A</label>
<div id="hidden-for-A">Hide on selecting A</div>
</div>
<div class="large-3 columns">
<input type="radio" value="B" name="Package" onchange="onChange()"><label>B</label>
<div id="hidden-for-B">Hide on selecting B</div>
</div>
<div class="large-3 columns">
<input type="radio" value="C" name="Package" onchange="onChange()"><label>C</label>
<div id="hidden-for-C">Hide on selecting C</div>
</div>
<div class="large-3 columns">
<input type="radio" value="D" name="Package" onchange="onChange()"><label>D</label>
<div id="hidden-for-D">Hide on selecting b</div>
</div>
</div>
慕容森
TA贡献1853条经验 获得超18个赞
添加这个CSS
input[type="radio"]:checked+label{
display:none;
}
input[type="radio"]:checked{
display:none;
}
扬帆大鱼
TA贡献1799条经验 获得超9个赞
仅使用 HTML 无法完成此操作。最好使用一个小脚本来简单地完成此操作：
const luxuryElement = document.querySelector("#luxury-div");
const customElement = document.querySelector("#custom-div");
function selected(value) {
showElement(luxuryElement);
showElement(customElement);
if (value == 'luxury') hideElement(luxuryElement);
if (value == 'custom') hideElement(customElement);
}
function hideElement(element) {
element.style.visibility = "hidden";
}
function showElement(element) {
element.style.visibility = "visible";
}
<div class="large-2 columns">
<label><b>Packages</b></label>
</div>
<!--column-->
<div class="large-10 columns">
<div class="large-3 columns">
<input type="radio" onchange="selected('standard')" value="A" name="Package" checked><label>Standard Package</label>
</div>
<!--column-->
<div class="large-3 columns">
<input type="radio" onchange="selected('luxury')" value="B" name="Package"><label>Luxe Package</label>
</div>
<!--column-->
<div class="large-3 columns">
<input type="radio" onchange="selected('package')" value="C" name="Package"><label>Ultimate Package</label>
</div>
<!--column-->
<div class="large-3 columns">
<input type="radio" onchange="selected('custom')" value="D" name="Package"><label>Custom Package</label>
</div>
<!--column-->
</div>
<div id="luxury-div">To hide if luxury is chosen</div>
<div id="custom-div">To hide if custom is chosen</div>
请注意，这只是一个示例，有很多方法可以实现这一点。上面的脚本只是一个例子。
- 3 回答
- 0 关注
- 92 浏览
添加回答
举报
0/150
提交
取消