<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
.di {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.di2 {
border: 1px solid gainsboro;
width: 600px;
padding: 20px;
margin: 10px;
}
.di5 {
display: none;
}
</style>
</head>
<body>
<div class="di">
<div class="di2">
<b>Do you have passport?</b><br>
<label>
<input type="checkbox" class="user">Yes
</label>
<div class="di5">
<input type="text" class="form-control" placeholder="your passport number">
</div>
</div>
<div class="di2">
<b>Do you have card?</b><br>
<label>
<input type="checkbox" class="user">Yes
</label>
<div class="di5">
<input type="text" class="form-control" placeholder="Enter your membership number">
</div>
</div>
</div>
<script>
$('.user').click(function() {
// let n = $(this).is(':checked');
let n = $(this).prop('checked');
if (n) {
$(this).parent().parent().find('.di5').slideDown();
} else {
$(this).parent().parent().find('.di5').slideUp();
}
});
</script>
</body>
</html>
가상선택자 prop('checked')를 통해서 체크박스가 체크가 되었나 확인 후 버튼의 부모 부모로 올라간 후 find()함수로 input태그를 slideDown()/slideUp()
공부를 햄스터하는 남자