Here we are using the jQuery click() function to assign the value to the textbox with the action of checkbox. Whenever the checkbox is clicked to check or uncheck, it assigns the respective return value into the textbox.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#textbox2').val('Not Selected');
$('#checkbox2').click(function() {
if ($('#checkbox2').is(":checked") == true) {
var value1 = $(this).val();
$('#textbox2').val(value1);
$('#checkbox3').prop('checked', false);
} else {
$('#textbox2').val('Not Selected');
}
});
$('#checkbox3').change(function() {
if ($('#checkbox3').is(":checked") == true) {
var value2 = $(this).val();
$('#textbox2').val(value2);
$('#checkbox2').prop('checked', false);
} else {
$('#textbox2').val('Not Selected');
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="checkbox2" value="Male" /> Male
<input type="checkbox" id="checkbox3" value="Female" /> Female
<br>
<input type="text" id="textbox2" />
</body>
</html>
Total Views: 4,736