我對 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 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消