我有一個表單，用戶可以選擇他/她是否是OR。如果用戶選擇隱藏的將不會顯示，如果用戶選擇隱藏的將顯示在下面。SINGLE CITIZENSHIPDUAL CITIZENSHIPSINGLE CITIZENSHIPdivDUAL CITIZENSHIPdiv<div class="form-row"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">Filipino</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">Dual Citizenship</label></div></div><div id="hidden"><div class="form-row"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">By birth</label></div><div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">By Naturalize</label></div></div></div>
2 回答
30秒到達戰(zhàn)場
TA貢獻1828條經(jīng)驗 獲得超6個贊
使用事件和顯示隱藏 div。change()jQuery
$(document).ready(function () {
$('#inlineCheckbox2').change(function () {
if (!this.checked)
$('#hidden').fadeOut('slow');
else
$('#hidden').fadeIn('slow');
});
});
#hidden{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>Dual Citizenship</label
>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>By Naturalize</label
>
</div>
</div>
</div>
參考：https://stackoverflow.com/a/19447642/10971575
泛舟湖上清波郎朗
TA貢獻1818條經(jīng)驗 獲得超3個贊
let valeInpOne = document.getElementById('inlineCheckbox1');
let valeInpTwo = document.getElementById('inlineCheckbox2').value;
let ele = document.getElementById("hidden");
if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }
- 2 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消