We Keep Coding

Condition with Input field number = checkbox able to select how?

Hi i would like some help where i have created a input field for number 1 - 7 where if number 1 mean i can only select 1 checkbox but if number 7 are choosen is it able to select 7 checkbox how can i do it ?
Here my code
<div class="container position">
<div class="row">
<input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
<div class="container-fluid">
<div class="box">
<input type="checkbox" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>
</div>
</div>
</div>

You can use eventListeners to check if the number of checkboxes checked is bigger than the value of the number input :
$("input[type='checkbox']").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$(this).prop("checked", false); //cancels the check
}
});
$("input[type='number'].inputStyle").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$("input[type='checkbox']:checked").prop("checked", false); //uncheck all checked checkboxes
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container position">
<div class="row">
<input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
<div class="container-fluid">
<div class="box">
<input type="checkbox" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>
</div>
</div>
</div>

Order of operations to pass information to a hidden field using Javascript

I don't use Javascript a lot and this has me stumped on where to start.
Goal is to create JS that sets the Sales Channel Hidden field value based on other field values per the order of operations as follows:
Order of operations
If Industry = Cleanroom, Sales Channel = ABC
If Industry = Healthcare, Sales Channel = DEF
If # of Employees = 250+, Sales Channel = GHI
If Multiple Location is True, Sales Channel = GHI
All others, Sales Channel = JK
<form>
<p class="FormIndustry pd-radio required">
<label class="field-label" for="13039">Industry</label>
<span class="value"> <span>
<input type="radio" name="industryname[]" id="47773" value="47773" onchange="" />
<label class="inline" for="47773">Cleanroom</label>
</span> <span>
<input type="radio" name="industryname[]" id="47777" value="47777" onchange="">
<label class="inline" for="47777">Healthcare</label>
</span><span>
<input type="radio" name="industryname[]" id="47779" value="47779" onchange="">
<label class="inline" for="47779">Manufacturing</label>
</span><span>
<input type="radio" name="industryname[]" id="47781" value="47781" onchange="">
<label class="inline" for="47781">Restaurant / Bar</label>
</span><span>
<input type="radio" name="industryname[]" id="47783" value="47783" onchange="">
<label class="inline" for="47783">Retail</label>
</span><span>
<input type="radio" name="industryname[]" id="47785" value="47785" onchange="">
<label class="inline" for="47785">Other</label>
</span></span>
</p>
<p class="FormEmployees pd-radio required">
<label class="field-label" for="numberemp">Number of Employees</label>
<span class="value"><span>
<input type="radio" name="numberemp[]" id="47765" value="47765" onchange="">
<label class="inline" for="47765">1-99</label>
</span><span>
<input type="radio" name="numberemp[]" id="47767" value="47767" onchange="">
<label class="inline" for="47767">100-249</label>
</span><span>
<input type="radio" name="numberemp[]" id="47769" value="47769" onchange="">
<label class="inline" for="47769">250+</label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span>
<input type="radio" name="13011[]" id="47787" value="47787" onchange="">
<label class="inline" for="47787">Yes</label>
</span><span>
<input type="radio" name="13011[]" id="147789" value="47789" onchange="">
<label class="inline" for="47789">No</label>
</span></span>
</p>
<p class="form-field Sales_Channel pd-hidden hidden">
<label>Sales Channel Hidden </label>
<input type="text" name="hidden" id="14592" value="" />
</p>
</form>

Added a description of what each part does within the code. Try it and then analyze it to understand how it is working.
// First we should define the state so we can store it later on.
const state = {
industry: null,
numberEmp: null,
multipleLocations: null
};
// Get the hidden user input. The attribute name is used as a
// selector but the id attribute would be better, keep that in mind.
const salesChannelInput = document.querySelector('[name="hidden"]');
// Then we setup listeners for all 3 input groups and when one of them
// changes, we store it in the previously created state.
// Also we run a function called 'selectSalesChannel' which will
// apply the correct value to the hidden sales channel input.
const industryInputs = document.querySelectorAll('[name="industryname[]"]');
industryInputs.forEach(input => {
input.addEventListener('input', event => {
state.industry = event.target.value;
selectSalesChannel(salesChannelInput, state.industry, state.numberEmp, state.multipleLocations);
});
});
const numberEmpInputs = document.querySelectorAll('[name="numberemp[]"]');
numberEmpInputs.forEach(input => {
input.addEventListener('input', event => {
state.numberEmp = event.target.value;
selectSalesChannel(salesChannelInput, state.industry, state.numberEmp, state.multipleLocations);
});
});
const multipleLocationsInputs = document.querySelectorAll('[name="13011[]"]');
multipleLocationsInputs.forEach(input => {
input.addEventListener('input', event => {
state.multipleLocations = event.target.value;
selectSalesChannel(salesChannelInput, state.industry, state.numberEmp, state.multipleLocations);
});
});
// Function with your logic, any mistake to the logic, should be
// changed here.
// Note: We are comparing with strings and not numbers, this is important.
function selectSalesChannel(salesInput, industry, numOfEmployees, multipleLocations) {
if (industry === '47773') {
salesInput.value = 'ABC';
}
else if (industry === '47777') {
salesInput.value = 'DEF';
}
else if (numOfEmployees === '47769' || multipleLocations === '47787') {
salesInput.value = 'GHI';
}
else {
salesInput.value = 'JK';
}
}
<form>
<p class="FormIndustry pd-radio required">
<label class="field-label" for="13039">Industry</label>
<span class="value"> <span>
<input type="radio" name="industryname[]" id="47773" value="47773" onchange="" />
<label class="inline" for="47773">Cleanroom</label>
</span> <span>
<input type="radio" name="industryname[]" id="47777" value="47777" onchange="">
<label class="inline" for="47777">Healthcare</label>
</span><span>
<input type="radio" name="industryname[]" id="47779" value="47779" onchange="">
<label class="inline" for="47779">Manufacturing</label>
</span><span>
<input type="radio" name="industryname[]" id="47781" value="47781" onchange="">
<label class="inline" for="47781">Restaurant / Bar</label>
</span><span>
<input type="radio" name="industryname[]" id="47783" value="47783" onchange="">
<label class="inline" for="47783">Retail</label>
</span><span>
<input type="radio" name="industryname[]" id="47785" value="47785" onchange="">
<label class="inline" for="47785">Other</label>
</span></span>
</p>
<p class="FormEmployees pd-radio required">
<label class="field-label" for="numberemp">Number of Employees</label>
<span class="value"><span>
<input type="radio" name="numberemp[]" id="47765" value="47765" onchange="">
<label class="inline" for="47765">1-99</label>
</span><span>
<input type="radio" name="numberemp[]" id="47767" value="47767" onchange="">
<label class="inline" for="47767">100-249</label>
</span><span>
<input type="radio" name="numberemp[]" id="47769" value="47769" onchange="">
<label class="inline" for="47769">250+</label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span>
<input type="radio" name="13011[]" id="47787" value="47787" onchange="">
<label class="inline" for="47787">Yes</label>
</span><span>
<input type="radio" name="13011[]" id="147789" value="47789" onchange="">
<label class="inline" for="47789">No</label>
</span></span>
</p>
<p class="form-field Sales_Channel pd-hidden hidden">
<label>Sales Channel Hidden </label>
<input type="text" name="hidden" id="14592" value="" />
</p>
</form>

Adding Multiple Checkboxes with Quanity Fields with JS

I'm having trouble adding this set of checkboxes with the respected Hrs. quantity box. The first problem is I have at least a zero "0" in all of the Hrs. quantity boxes which won't work for us. The second problem is I'd like it to only add the checkboxes that are selected. What you cant see from the HTML, is that there is logic that only displays the correct Hrs. quantity
box based on the selection. The HTML is formatted from the system that we use so I have no control over it.
// Equipment Subtotals - Cranes
$(document).ready(function () {
$(document).on('touchend click keyup change', function (ev) {
var val1 = parseFloat($("#element_323_1").attr('data-pricedef'));
var val2 = parseFloat($("#element_325").val());
var val3 = parseFloat($("#element_323_2").attr('data-pricedef'));
var val4 = parseFloat($("#element_525").val());
var val5 = parseFloat($("#element_323_3").attr('data-pricedef'));
var val6 = parseFloat($("#element_528").val());
var val7 = parseFloat($("#element_323_4").attr('data-pricedef'));
var val8 = parseFloat($("#element_529").val());
var val9 = parseFloat($("#element_323_5").attr('data-pricedef'));
var val10 = parseFloat($("#element_530").val());
var val11 = parseFloat($("#element_323_6").attr('data-pricedef'));
var val12 = parseFloat($("#element_531").val());
var val13 = parseFloat($("#element_323_7").attr('data-pricedef'));
var val14 = parseFloat($("#element_532").val());
var val20 = (val1 * val2 + val3 * val4 + val5 * val6 + val7 * val8 + val9 * val10 + val11 * val12 + val13 * val14).toFixed(2);
if (isNaN(val20) || val20 < 0) {
$("#element_545").val("0");
} else {
$("#element_545").val(val20);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li_323" data-pricefield="checkbox" data-pricevalue="0" class="checkboxes column_1">
<span class="description">Cranes </span>
<div>
<fieldset>
<legend style="display: none">Cranes</legend>
<span><input id="element_323_1" data-pricedef="146.00" name="element_323_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_1">17-Ton Crane w/2 MC</label>
</span>
<span><input id="element_323_2" data-pricedef="200.00" name="element_323_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_2">17-Ton Crane w/2 MC 11+Hrs.</label>
</span>
<span><input id="element_323_3" data-pricedef="122.00" name="element_323_3" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_3">17-Ton Crane w/Oper.</label>
</span>
<span><input id="element_323_4" data-pricedef="150.00" name="element_323_4" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_4">17-Ton Crane w/Oper. 11+Hrs.</label>
</span>
<span><input id="element_323_5" data-pricedef="150.00" name="element_323_5" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_5">17-Ton Crane w/Oper. Holiday</label>
</span>
<span><input id="element_323_6" data-pricedef="160.00" name="element_323_6" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_6">23-Ton Crane w/Oper.</label>
</span>
<span><input id="element_323_7" data-pricedef="190.00" name="element_323_7" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_7">23-Ton Crane w/Oper. 11+Hrs.</label>
</span>
</fieldset>
</div>
</li> <li id="li_527" class="column_3 guidelines_bottom">
<label class="description" for="element_527">Enter Crane Number(s) <span id="required_527" class="required">*</span></label>
<div>
<input id="element_527" name="element_527" class="element text large" type="text" value="" />
</div><p class="guidelines" id="guide_527"><small>Enter equipment numbers separated by a comma.</small></p>
</li> <li id="li_325" class="column_3 guidelines_bottom">
<label class="description" for="element_325">17-Ton / Hrs. <span id="required_325" class="required">*</span></label>
<div>
<input id="element_325" name="element_325" class="element text small" type="text" data-quantity_link="element_323_1" value="" />
<span class="label"><var id="range_max_325">11</var> or less.</span>
</div><p class="guidelines" id="guide_325"><small>* No More Than 11 Hrs.</small></p>
</li> <li id="li_525" class="column_3">
<label class="description" for="element_525">17-Ton / OT Hrs. <span id="required_525" class="required">*</span></label>
<div>
<input id="element_525" name="element_525" class="element text small" type="text" data-quantity_link="element_323_2" value="" />
</div>
</li> <li id="li_528" class="column_3 guidelines_bottom">
<label class="description" for="element_528">17-Ton / Hrs. <span id="required_528" class="required">*</span></label>
<div>
<input id="element_528" name="element_528" class="element text small" type="text" data-quantity_link="element_323_3" value="" />
<span class="label"><var id="range_max_528">11</var> or less.</span>
</div><p class="guidelines" id="guide_528"><small>* No More Than 11 Hrs.</small></p>
</li> <li id="li_529" class="column_3">
<label class="description" for="element_529">17-Ton / OT Hrs. <span id="required_529" class="required">*</span></label>
<div>
<input id="element_529" name="element_529" class="element text small" type="text" data-quantity_link="element_323_4" value="" />
</div>
</li> <li id="li_530" class="column_3">
<label class="description" for="element_530">17-Ton / Holiday Hrs. <span id="required_530" class="required">*</span></label>
<div>
<input id="element_530" name="element_530" class="element text small" type="text" data-quantity_link="element_323_5" value="" />
</div>
</li> <li id="li_531" class="column_3 guidelines_bottom">
<label class="description" for="element_531">23-Ton / Hrs. <span id="required_531" class="required">*</span></label>
<div>
<input id="element_531" name="element_531" class="element text small" type="text" data-quantity_link="element_323_6" value="" />
<span class="label"><var id="range_max_531">11</var> or less.</span>
</div><p class="guidelines" id="guide_531"><small>* No More Than 11 Hrs.</small></p>
</li> <li id="li_532" class="column_3">
<label class="description" for="element_532">23-Ton / OT Hrs. <span id="required_532" class="required">*</span></label>
<div>
<input id="element_532" name="element_532" class="element text small" type="text" data-quantity_link="element_323_7" value="" />
</div>
</li> <li id="li_545" style="display:" class="column_3">
<label class="description" for="element_545">Crane Subtotal </label>
<div>
<input id="element_545" name="element_545" class="element text small" readonly="readonly" type="text" value="" />
</div>
Thanks for any help!
Aaron

Try this instead:
function doMySums(){
var sum = 0;
if ($("#idOfCheckboxForThisInput").is(":checked"))
sum += (parseFloat($("#idOfElementWithPriceDef").attr('data-pricedef')) || 0) * (parseFloat($("#idOfInputForThisCheckBox").val()) || 0);
//continue in similar spirit until done
return sum;
}
First, the $().is(':checked') will make sure that the addition is only performed when the selector is checked. The parseFloat() || 0 will ensure that if the parseFloat ever resolves to a NaN, then the expression will resolve to zero, and not mess up your sum. This will allow you to have empty inputs.

HTML forms - multiple choice form to plain text

I would like to create fillable form to html and save it to text file or just on site have a box making everything checked copyable as plain text.
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
So for example I filled the form like this
form filled example
So example output would be:
Chronic diesases none
Allergies none
Medical history
since 3 days diahrerra vomiting, temp 38,5 C
Skin rash on legs
Temperature 38,1
So I would liek to the unchecked values to be omitted and checked to be filled
How to do that? I want to make physical examination easier, I'm sick of always typing everythig

Here you go, you can go ahead and do something with the String now
const $ = (s) => document.querySelector(s);
const $$ = (s) => document.querySelectorAll(s);
$("#saveForm").addEventListener("click", function (evt) {
evt.preventDefault(); // don't submit the form
let output = [];
// set first field if radio checked
let inPresenceOf = Array.from($$("input[type='radio'][id^='element_1_']")).filter(element => element.checked);
if(inPresenceOf.length === 1) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
// set second field if value not empty
if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
// set third field if value not empty
if($("#element_3").value.trim()) output.push("Allergies: " + $("#element_3").value.trim());
// set fourth field if value not empty
if($("#element_4").value.trim()) output.push("Medical History: " + $("#element_3").value.trim());
// set fifth field if radio checked
let meningism = Array.from($$("input[type='radio'][id^='element_5_']")).filter(element => element.checked);
if(meningism.length === 1) output.push("Meningism " + $("label[for='"+meningism[0].id+"']").innerHTML);
// set sixth field if radio checked
let skin = Array.from($$("input[type='radio'][id^='element_7_']")).filter(element => element.checked);
if(skin.length === 1) {
if($("label[for='"+skin[0].id+"']").innerHTML === "Normal, without purpura")
output.push("Skin: Normal, without purpura");
else output.push("Skin: " + $("#element_7_2").value);
}
// set seventh field if value not empty
if($("#element_6").value.trim()) output.push("Temperature: " + $("#element_6").value.trim());
const outputString = output.join("\n");
console.log(outputString)
})
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>

Are you familiar with Javascript/jQuery?
You need to use some form of logic to determine whether the field is null or not, or whether the box is checked or not
<form>
<input type="checkbox" data-val="Has Hemorrhoids"/>Hemmorhoids<br/>
<input type="checkbox" data-val="Has Severe Anal Fissures"/>Anal Fissures<br/>
<button id="create_final_summary">Make Summary</button>
</form>
<script>
$('#create_final_summary').on('click', function(){
var allFields = $(this).parents('form').find('input');
console.log(allFields);
allFields.each(function(){
if($(this).prop('checked' == true)){
$("#final_summary").append($(this).attr('data-val'));
}
});
});

You can use JavaScript to extract the text data as an object and view the properties of that object (view it in the console):
var relatives = document.body.querySelectorAll("#relativesChoices .radio");
var chronicInput = document.body.querySelector("#element_2");
var allergyInput = document.body.querySelector("#element_3");
var historyInput = document.body.querySelector("#element_4");
var meninigsm = document.body.querySelectorAll("#meninigsm .radio");
var skin = document.body.querySelectorAll("#skin .radio");
var temp = document.body.querySelector("#element_6");
var finalResult = {
relatives:"",
chronic: "",
allergies: "",
medicalHistory: "",
meningism :"",
skin:"",
temparture:""
}
function displayResults(){
for (var choice of relatives){
if(choice.checked === true){
finalResult.relatives = choice.value;
}
}
for (var choice of meninigsm){
if(choice.checked === true){
finalResult.meningism = choice.value;
}
}
for (var choice of skin){
if(choice.checked === true){
finalResult.skin = choice.value;
}
}
finalResult.chronic = chronicInput.value;
finalResult.allergies = allergyInput.value;
finalResult.medicalHistory = historyInput.value;
finalResult.temparture = temp.value;
console.log(finalResult);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEDICAL HISTORY QUESTIONNAIRE</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Visit in the presence of </label>
<span id="relativesChoices">
<input value="parents" id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input value="mother" id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input value="father" id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input value="grandmother" id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input value="grandfather " id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input value="grandparents" id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li> <li id="li_2" >
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_3" >
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_4" >
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li> <li id="li_5" >
<label class="description" for="element_5">Meningism </label>
<span id="meninigsm">
<input value="negative" id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input value="positive" id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li> <li id="li_7" >
<label class="description" for="element_7">Skin </label>
<span id="skin">
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="normal" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="abnormal" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li> <li id="li_6" >
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<button onclick="displayResults()">displayResults<button>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>

jQuery if each input value inside each li == 0

I'm trying to solve this issue. I have multiple inputs and I would like to compare if everyone has value == 0 and is also checked.
I don't know how to do it - I spend almost day searching and finding a way how to do it and don't have clue how to go further. I tried to find if one input is checked and has that value.
Thank U for Your help.
$(document).on('change','select, input', function() {
console.log('input/select has been changed');
var $this = $(this);
var $inputValue = $this.val();
console.log('input Value is ' + $inputValue);
if ($inputValue == 0 && $this.is(':checked')) {
console.log('One input is checked and has 0 value');
}
if ('all first inputs are checked and has 0 value') {
console.warn('Could U help me?');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>

I'm not completely sure what you want, but I think this can help you
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var inputs = $('input');
var inputsWithValZero = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0);
});
var inputsWithValZeroAndChecked = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0 && $(elm).is(':checked'));
});
if ($(inputsWithValZero).length == inputsWithValZeroAndChecked.length){
console.log('all checked inputs checked has 0 value');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>

<script>
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var count = 0;
$('input').each(function ( index,value) {
console.log(value);
console.log(index);
if ($(value).val() == 0 && $(value).is(':checked')) {
count = count + 1;
console.log(count+' input is checked and has 0 value');
}
});
console.log($('input').length);
if ($('ul').length == count)
console.log('all first inputs are checked and has 0 value')
}
</script>