숨겨진 p 태그로 시작한 다음 클릭하면 입력 필드가 화면에 표시됩니다. 나는 지금 이것을 가지고있다 :
<label for="check-1">Small</label>
<input type="checkbox" name="size[]" id="small" value="small" onclick="sFunction()">
<script>
function sFunction() {
document.getElementById("s").innerHTML = '<label for="check-1">SMALL Price ($). </label><input type="text" name="s" id="small">';
}
</script>
<p id="s"></p>
그러나 나는 분명히 그것을 닫을 수 없으며 확인란 클릭시 다시 숨기는 방법을 모르겠습니다. 그래서 지금은 숨김으로 시작하고 클릭하면 표시되며 다시 클릭하면 숨길 필요가 있습니다. 감사
필요에 따라 수정할 수있는 또 하나의 솔루션 :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<style>
.hide { display: none; }
</style>
</head><body>
<label for="check-1">Small</label>
<input type="checkbox" id="check-1" onclick="sFunction()">
<span id="smallPrice" class="hide" >Price $ <input type="text" id="small"></span>
<script>
function sFunction() {
document.getElementById("smallPrice").classList.toggle('hide');
}
</script>
</body></html>
확인란을 제거하기 위해 디스플레이를 다시 정렬 할 수도 있습니다.
<label for="check-1">Small</label>
<span id="smallPrice" class="hide" >
<input type="checkbox" id="check-1" onclick="sFunction()">
Price $ <input type="text" id="small"></span>
JS를 전혀 사용하지 않는 또 하나의 옵션-CSS 전용.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Toggle input element </title>
<style>
label { font-size: 1.5em; color: red; }
label:hover { cursor: pointer; }
.toggle + label + span{ display:none; }
.toggle:checked + label + span{ display:inline-block; }
</style>
</head>
<body>
<input type="checkbox" id="toggle1" class="toggle" hidden="">
<label for="toggle1">Small</label>
<span> Price $ <input type="text" id="small"></span>
</body></html>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다