How to Display Text Based on Checkbox State
Example 1: index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$("#chkPassport2").click(function () {
if ($(this).is(":checked")) {
$("#dvPassport2").show();
} else {
$("#dvPassport2").hide();
}
});
});
</script>
</head>
<body>
<h2>Show Hide DIV with TextBox when CheckBox is checked unchecked using jQuery</h2>
<br />
<br />
<label for="chkPassport2">
<input type="checkbox" id="chkPassport2" />
Do you have Passport?
</label>
<br />
<div id="dvPassport2" style="display: none">
Passport Number:
<input type="text" id="Text1" />
</div>
</body>
</html>Example 2: index.html
<!DOCTYPE html>
<html>
<head>
<style>
.answer {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function valueChanged() {
if($('.promocode_question').is(":checked"))
$(".answer").show();
else
$(".answer").hide();
};
</script>
</head>
<body>
<fieldset class="question">
<label for="promocode_question">Do you have a promocode?</label>
<input class="promocode_question" type="checkbox" name="promocode_question" value="1" onchange="valueChanged()"/>
<span class="item-text">Yes</span>
</fieldset>
<fieldset class="answer">
<label for="promocode_field">Your promocode:</label>
<input type="text" name="promocode_field" id="promocode_field"/>
</fieldset>
</body>
</html>I hope you get an idea about when checkbox is checked show popup.
- This blog post was originally published at: https://www.pakainfo.com
1.00 GEEK