我有三個單選按鈕；
- 當我單擊第一個時，我希望其他兩個的輸入不可見；
- 當我點擊第二個時，我希望第三個的輸入不可見（第一個沒有輸入）
- 當我單擊第三個時，我希望第二個輸入（即與第二個單選按鈕相關的那個）不可見。
我寫的代碼不好用；當我單擊第一個單選按鈕時，它只隱藏第三個單選按鈕的輸入，而不是第二個單選按鈕的輸入。此外，當我單擊第三個時，第二個單選按鈕的輸入不會消失。
<div id="fieldinput" class="mt-5">
<label for="discount" class="form-label">Sconto</label>
<div class="form-check my-4 mb-3">
<input class="form-check-input" type="radio" name="discount" id="flexRadioNoDisconunt" value="nodiscount" checked onclick="showinputfield(value);">
<label class="form-check-label" for="flexRadioNoDisconunt"> No discount </label>
</div>
<div class="form-check my-4 mb-3">
<input class="form-check-input" type="radio" name="discount" id="flexRadioRelativeDisconunt" value="relativediscount" onclick="showinputfield(value);">
<label class="form-check-label" for="flexRadioRelativeDisconunt"> Relative Disconunt in %</label>
<input type="number" class="form-control p-3 inputrelativediscount" name="" value="">
</div>
<div class="form-check my-4 mb-3">
<input class="form-check-input" type="radio" name="discount" id="flexRadioAbsoluteDisconunt" value="absolutediscount" onclick="showinputfield(value);">
<label class="form-check-label" for="flexRadioAbsoluteDisconunt"> Absolute Disconunt </label>
<input type="number" class="form-control p-3 inputabsolutediscount" name="" value="">
</div>
</div>
window.showinputfield = function (check) {
let input = document.getElementById('fieldinput');
if(check=="nodiscount"){
input.classList.add("visible");
}
else if(check=="relativediscount"){
input.classList.add("visible");
}else {
input.classList.remove("visible");
}
}
.visible .inputrelativediscount{
display: block;
}
.visible .inputabsolutediscount{
display: none;
}
任何人都可以幫助我嗎？
uj5u.com熱心網友回復：
在這里，我為你做這個。
<!DOCTYPE html>
<html>
<style>
.inputs{
display: none;
}
</style>
<body>
<div id="fieldinput" class="mt-5">
<label for="discount" class="form-label">Sconto</label>
<div class="form-check my-4 mb-3">
<input class="form-check-input" type="radio" name="discount" id="flexRadioNoDisconunt" value="nodiscount" checked onclick="showinputfield(value);">
<label class="form-check-label" for="flexRadioNoDisconunt"> No discount </label>
</div>
<div class="form-check my-4 mb-3">
<input class="form-check-input" type="radio" name="discount" id="flexRadioRelativeDisconunt" value="relativediscount" onclick="showinputfield(value);">
<label class="form-check-label" for="flexRadioRelativeDisconunt"> Relative Disconunt in %</label>
<input type="number" id="inputrelativediscount" class="form-control p-3 inputs" name="" value="">
</div>
<div class="form-check my-4 mb-3">
<input class="form-check-input" type="radio" name="discount" id="flexRadioAbsoluteDisconunt" value="absolutediscount" onclick="showinputfield(value);">
<label class="form-check-label" for="flexRadioAbsoluteDisconunt"> Absolute Disconunt </label>
<input type="number" id="inputabsolutediscount" class="form-control p-3 inputs" name="" value="">
</div>
</div>
<script>
function showinputfield(check){
let noDiscount = document.getElementById("flexRadioNoDisconunt");
let inputs = document.getElementsByClassName('inputs');
let relativeDiscount = document.getElementById("inputrelativediscount");
let absoluteDiscount = document.getElementById("inputabsolutediscount");
if(check === "nodiscount"){
relativeDiscount.style.display = 'none';
absoluteDiscount.style.display = 'none';
}
else if(check === 'relativediscount'){
relativeDiscount.style.display = 'block';
absoluteDiscount.style.display = 'none';
}
else if(check === 'absolutediscount'){
absoluteDiscount.style.display = 'block';
relativeDiscount.style.display = 'none';
}
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/517408.html
標籤：javascripthtml拉拉维尔laravel-8laravel-9
上一篇：將資料推入物件到陣列php中