So, there are four checkboxes... Heating, AC, Cold Chain, and Others.
When "Others" is checked, the hidden input text will appear with a placeholder "Please specify"... and when it is unchecked, the input text box will on "display none".
Note that the other values (Heating, AC, Cold Chain) use the same input text box.
Here is my code:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox(){
$("input:checkbox").change(function() {
selectedCB = [];
notSelectedCB = [];
selectedValue=$(this).attr("value");
CountSelectedCB.length = 0;
if(selectedValue==="Others" && $(this).is(":checked")){
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
}
else{
$("input:checkbox").each(function() {
if($(this).attr("value")==="Others")
$(this).prop('checked', false);
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("value"));
}
});
}
$('input[name=solutions]').val(CountSelectedCB).blur();
});
}
function uncheckAllCheckBox(){
$("input:checkbox").each(function() {
$(this).prop('checked', false);
CountSelectedCB.length=0;
});
}
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox(){
$("input:radio").change(function() {
selectedRB = [];
notSelectedRB = [];
CountSelectedRB.length = 0;
$("input:radio").each(function() {
if ($(this).is(":checked")) {
CountSelectedRB.push($(this).attr("value"));
}
});
$('input[name=existing]').val(CountSelectedRB).blur();
});
}
$('#solutions, #existing').bind('keyup blur', function() {
$('#summary').val('You are looking for solutions in ' +
$('#solutions').val() +
(' \n') +
'Are you using an existing customer? ' +
$('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>
Aucun commentaire:
Enregistrer un commentaire