我想根據是否選中復選框來顯示和隱藏主檔案中的選項。我有很多復選框，但在這里我正在檢查地址復選框。
這是我的復選框
<input type="checkbox" id="address">Mark it
這是我想隱藏/顯示的 div
<div id="options">
//div
</div>
if($('#address').prop('checked')){
$('#options').show()
}else{
$('#options').hide()
}
上面的代碼對我不起作用。
uj5u.com熱心網友回復：
您的代碼僅適用于first time并非每次復選框的值更改時。
您必須添加復選框值的event listener更改checked
$("#address").on("change", e => {
const isChecked = e.target.checked;
if (isChecked) $('#options').show()
else $('#options').hide()
})
if ($('#address').prop('checked')) {
$('#options').show()
} else {
$('#options').hide()
}
$("#address").on("change", e => {
const isChecked = e.target.checked;
if (isChecked) $('#options').show()
else $('#options').hide()
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="address">Mark it
<div id="options">
//div
</div>uj5u.com熱心網友回復：
您的代碼不起作用的原因，您只檢查條件復選框檢查或不每次單擊復選框時也必須呼叫復選框更改事件。這是一個作業演示，希望它可以幫助您了解 jquery 的作業原理。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#options').hide();
$('#address').change(function () {
if ($('#address').prop('checked')) {
$('#options').show()
} else {
$('#options').hide()
}
});
});
</script>
</head>
<body>
<div id="options">
//div
</div>
<input type="checkbox" id="address">Mark it
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/352951.html
標籤：javascript 查询