Develop Reference

Multiple Checkbox Clear or Reset option Jquery

i want to consult issue about javascript jquery
i want this value > 20 && < 40 clear or reset option in jquery suggestion please.
It looks function error in javascript and function no clear and reset option. but function show display block wrong position .
<script>
function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()">
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()">
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()">
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);">
<input type="text" id="number" value="">
</form>
<a id="showdatacheckbox"></a>

function Checkbox() {
var length = document.tester.selection.length;
var $result = "";
var chked = 0;
for (i = 0; i < length; i++) {
if (document.tester.selection[i].checked) {
$result += document.tester.selection[i].value;
}
}
var getdata = $result;
}
var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function (e) {
var selectedtext = ($(this).next().text());
if ($(this).is(':checked')) {
$("#showdatacheckbox").append('<option value="' + selectedtext + '">' + selectedtext + '</option>');
} else {
$('option[value*="' + selectedtext + '"]').remove();
}
});
function range(val) {
document.getElementById('number').value = val;
if (val > 20 && val < 40) {
$("input[type='checkbox']:checked").click();
}
}
prefer = document.getElementById("number").value;
if (prefer > 20 && prefer < 40) {
document.getElementById("wordingprogrammer").style.display = "none";
document.getElementById("wordingsenior").style.display = "none";
} else {
document.getElementById("wordingprogrammer").style.display = "block";
document.getElementById("wordingsenior").style.display = "block";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="tester" name="tester">
<input type="checkbox" class="iconDirector" name="selection" id="Director" value="1" onclick="Checkbox()" />
<label id="wordingdirector">Director</label>
<input type="checkbox" class="iconProgrammer" name="selection" id="Programmer" value="2" onclick="Checkbox()" />
<label id="wordingprogrammer">Programmer</label>
<input type="checkbox" class="iconSenior" name="selection" id="Senior" value="3" onclick="Checkbox()" />
<label id="wordingsenior">Senior</label>
<input type="range" name="rangeInput" min="0" max="100" onchange="range(this.value);" />
<input type="text" id="number" value="" />
</form>
<a id="showdatacheckbox"></a>

When unchecking checkbox output value stays same. How can i fix it?

function diagnose() {
var add = 0;
var age = parseFloat(document.getElementById('myNumber').value);
var table = document.getElementById('table');
var checkboxes = document.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseFloat(checkboxes[i].value);
}
}
var p = +add;
var ad = 0;
var checkboxe = document.getElementsByClassName('addon2');
if (age < 3 && p >= 4) {
for (var j = 0; j < checkboxe.length; j++) {
if (checkboxe[j].checked) {
ad += parseFloat(checkboxe[j].value);
}
var a = p + ad;
if (a >= 5) {
document.getElementById('total').innerHTML = "Clininacal diagnosis yes ";
}
}
} else {
document.getElementById('total').innerHTML = " Clininacal diagnosis no";
}
}
document.getElementById('table').addEventListener('change', diagnose);
</head>
<body>
Age: <input type="number" id="myNumber" class="no-spinners">
<div id="table">
https://stackoverflow.com/posts/46125218/edit# <input type="checkbox" name="Neonatal" value="1.0" class="addon">
<label for="Neo">Neo</label></br>
<input type="checkbox" name="F" value="1.0" class="addon">
<label for="Feed">Feed</label></br>
<input type="checkbox" name="W" value="1.0" class="addon">
<label for="Weight">Weight</label></br>
<input type="checkbox" name="Dysmorphic" value="1.0" class="addon">
<label for="Char">Char</label></br>
<input type="checkbox" name="Pub" value="1.0" class="addon">
<label for="Pub">Smally</label></br>
<input type="checkbox" name="Dev" value="1.0" class="addon">
<label for="Dev">Dev</label></br>
<hr>
<input type="checkbox" name="Lethargy" value=".5" class="addon2">
<label for="Lethargy">Lethargy</label></br>
<input type="checkbox" name="Typical" value=".5" class="addon2">
<label for="TypicalBehavior">Typical</label></br>
<input type="checkbox" name="Sleep" value=".5" class="addon2">
<label for="Sleep">Sleep</label></br>
<input type="checkbox" name="Short" value=".5" class="addon2">
<label for="Short">Short</label></br>
<input type="checkbox" name="Hypo" value=".5" class="addon2">
<label for="Hypo">Hypo</label></br>
<input type="checkbox" name="Small" value=".5" class="addon2">
<label for="Small">Small</label></br>
<input type="checkbox" name="Narrow" value=".5" class="addon2">
<label for="Narrow">Narrow</label></br>
<input type="checkbox" name="Esot" value=".5" class="addon2">
<label for="Esot">Esot</label></br>
<input type="checkbox" name="Thick" value=".5" class="addon2">
<label for="Thick">Thick</label></br>
<input type="checkbox" name="Speech" value=".5" class="addon2">
<label for="Speech">Speech</label></br>
<input type="checkbox" name="Skin" value=".5" class="addon2">
<label for="Skin">Skin</label></br>
</div>
<span id="total"></span>
</div>
</body>
So I have this code. Above the line each input has 1 point, under the line each input has .5 point. For right result It needs at least 5 points , but 4 of them must be from 1 point inputs. For example, four 1 point and two .5 point. I got It worked, but when unchecking the checkboxes It still shows the same string. So how can I fix it ?
Thanks.

you just needed to add the else on the inner conditional evaluation as well.
The else:
else {
document.getElementById('total').innerHTML = " Clininacal diagnosis no";
}
The whole code:
function diagnose() {
var add = 0;
var age = parseFloat(document.getElementById('myNumber').value);
var table = document.getElementById('table');
var checkboxes = document.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseFloat(checkboxes[i].value);
}
}
var p = +add;
var ad = 0;
var checkboxe = document.getElementsByClassName('addon2');
if (age < 3 && p >= 4) {
for (var j = 0; j < checkboxe.length; j++) {
if (checkboxe[j].checked) {
ad += parseFloat(checkboxe[j].value);
}
var a = p + ad;
if (a >= 5) {
document.getElementById('total').innerHTML = "Clininacal diagnosis yes ";
} else {
document.getElementById('total').innerHTML = " Clininacal diagnosis no";
}
}
} else {
document.getElementById('total').innerHTML = " Clininacal diagnosis no";
}
}
document.getElementById('table').addEventListener('change', diagnose);

The last else block stating the negative answer is reached only when the (age < 3 && p >= 4) condition is not met, so when the positive answer was already reached there's no way to rewrite it - quick and dirty solution is to duplicate the last else after the (a >= 5) condition or store results in a variable and decide the resulting message according to it:
var positive = false;
if (age < 3 && p >= 4) {
for (var j = 0; j < checkboxe.length; j++) {
if (checkboxe[j].checked) {
ad += parseFloat(checkboxe[j].value);
}
var a = p + ad;
if (a >= 5) {
positive = true;
}
}
}
if (positive) {
document.getElementById('total').innerHTML = "Clininacal diagnosis yes ";
}
else {
document.getElementById('total').innerHTML = " Clininacal diagnosis no";
}

Adding up total price of selected items (Javascript)

I ran into a problem. Code is here:
// JavaScript Document
window.totalIt= function() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += 1;
}
}
if(total>=3){
document.getElementById("total").value = "$" + (total*29).toFixed(2);
}
else{
document.getElementById("total").value = "$" + (total*39).toFixed(2);
}
}
window.totalPrisDessert= function() {
var input = document.getElementsByName("dessert");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "$" + total.toFixed(2);
}
<div id="formular">
<div id="formulartekst">
<form>
<h2 class="formskrift">Order Hot Food</h2>
<p class="kroner">$39 / $29 when 3 or more checked</p>
<input name="product" value="39" type="checkbox" id="p1" onclick="totalIt()" /> Monday
<br>
<input name="product" value="39" type="checkbox" id="p2" onclick="totalIt()" /> Tuesday
<br>
<input name="product" value="39" type="checkbox" id="p3" onclick="totalIt()" /> Wednesday
<br>
<input name="product" value="39" type="checkbox" id="p4" onclick="totalIt()" /> Thursday
<br>
<input name="product" value="39" type="checkbox" id="p5" onclick="totalIt()" /> Friday
<h2 class="formskrift">Dessert</h2>
<p class="kroner">$20 ALWAYS</p>
<input name="dessert" value="20" type="checkbox" id="p6" onclick="totalPrisDessert()"/>
Monday<br>
<input name="dessert" value="20" type="checkbox" id="p7" onclick="totalPrisDessert()"/>
Tuesday<br>
<input name="dessert" value="20" type="checkbox" id="p8" onclick="totalPrisDessert()"/>
Wednesday<br>
<input name="dessert" value="20" type="checkbox" id="p9" onclick="totalPrisDessert()"/>
Thursday<br>
<input name="dessert" value="20" type="checkbox" id="p10" onclick="totalPrisDessert()"/>
Friday<br>
<label>
<br> Total
<input value="$0.00" readonly type="text" id="total" />
</label>
<input type="submit" value="Order">
</form>
</div>
</div>
https://jsfiddle.net/u0y7aoct/2/
When I check the top 5 boxes they add the price in the total box. However if I check any of the below 5 boxes (desserts) the price overwrites. I need the total price showing, but right now they are acting as two different.

Try this updated fiddle
Basically, create a common method which does the total of both
window.totalAll = function()
{
document.getElementById("total").value = (totalIt() + totalPrisDessert()).toFixed(2) ;
}

You dont need to call two different function you can add both values by calling same function and just need to check a condtion whether is it product or dessert.
var grndTotal = 0;
var total1 = 0;
var total2 = 0;
window.totalIt= function(name) {
if(name == "product"){
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += 1;
}
}
if(total>=3){ total1 = (total*29).toFixed(2);}
else{total1 = (total*39).toFixed(2);}
}
if(name == "dessert"){
var input = document.getElementsByName("dessert");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
total2 = total.toFixed(2);
}
grndTotal = parseInt(total2) + parseInt(total1);
document.getElementById("total").value = "$"+grndTotal ;
}
This is the updated function that work correctly.
https://jsfiddle.net/VijayDhanvai/hd103j4a/

It's just because you programmed it like this. You made two different function for every one of the case and these functions act separately. What did you expect? :)
You need more something like this:
window.totalIt = function() {
var input = document.getElementsByName("product");
var total = 0;
var count = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
count += 1;
}
}
if(count >= 3){
total = count * 29;
} else {
total = count * 39;
}
return total;
}
window.totalPrisDessert = function() {
var input = document.getElementsByName("dessert");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
return total;
}
window.grandTotal = function() {
var total = totalIt() + totalPrisDessert();
document.getElementById("total").value = "$" + total.toFixed(2);
}
Of course, use the new function grandTotal() in your html.

getting Numerical Value from Radio button using JavaScript code

Why this code is not returning the value.When I click Calculate, it does not work.

Comparison is ==
Assignment is =.
You need ageNumerical = 0;
Check out this fiddle.
Here is the snippet.
function getValue() {
var a = patientAge();
var b = patientBmi();
var c = history();
var d = patientDiet();
var totalValue;
totalValue = a + b + c + d;
document.getElementById('message').innerHTML = totalValue;
}
function patientAge() {
var age = document.getElementsByName('ageRange');
var ageBracket;
var ageNumerical;
for (var i = 0; i < age.length; i++) {
if (age[i].checked) {
ageBracket = age[i].value;
}
}
if (ageBracket == "1-25") {
ageNumerical = 0;
} else if (ageBracket == "26-40") {
ageNumerical = 5;
} else if (ageBracket == "41-60") {
ageNumerical = 8;
} else {
ageNumerical = 10;
}
return ageNumerical;
}
function patientBmi() {
var bmi = document.getElementsByName('bmiRange');
var bmiValue;
var bmiNumerical;
for (var i = 0; i < bmi.length; i++) {
if (bmi[i].checked) {
bmiValue = bmi[i].value;
}
}
if (bmiValue == "0-25") {
bmiNumerical = 0;
} else if (bmiValue == "26-30") {
bmiNumerical = 0;
} else if (bmiValue == "31-35") {
bmiNumerical = 9;
} else {
bmiNumerical = 10;
}
return bmiNumerical;
}
function history() {
var patientHistory = document.getElementsByName('familyHistory');
var historyAnswer;
var historyNumerical;
for (var i = 0; i < patientHistory.length; i++) {
if (patientHistory[i].checked) {
historyAnswer = patientHistory[i].value;
}
}
if (historyAnswer == "No") {
historyNumerical = 0;
} else if (historyAnswer == "Grandparent") {
historyNumerical = 7;
} else if (historyAnswer == "Sibling") {
historyNumerical = 15;
} else {
historyNumerical = 15;
}
return historyNumerical;
}
function patientDiet() {
var dietQuestion = document.getElementsByName('dietHabits');
var dietAnswer;
var dietNumerical;
for (var i = 0; i < dietQuestion.length; i++) {
if (dietQuestion[i].checked) {
dietAnswer = dietQuestion[i].value;
}
}
if (dietAnswer == "Low sugar") {
dietNumerical = 0;
} else if (dietAnswer == "Normal sugar") {
dietNumerical = 0;
} else if (dietAnswer == "Quite high sugar") {
dietNumerical = 7;
} else {
dietNumerical = 10;
}
return dietNumerical;
}
<div id="ageQuestion">
<p>How old are you?</p>
<label for="age1">1-25</label>
<input type="radio" name="ageRange" value="1-25" />
<label for="age2">26-40</label>
<input type="radio" name="ageRange" value="26-40" />
<label for="age3">41-60</label>
<input type="radio" name="ageRange" value="41-60" />
<label for="age4">60+</label>
<input type="radio" name="ageRange" value="60+" />
</div>
<div id="bmi">
<p>What is your BMI?</p>
<label for="bmiLevel">0-25</label>
<input type="radio" name="bmiRange" value="0-25" />
<label for="bmiLevel">26-30</label>
<input type="radio" name="bmiRange" value="26-30" />
<label for="bmiLevel">31-35</label>
<input type="radio" name="bmiRange" value="31-35" />
<label for="bmiLevel">35+</label>
<input type="radio" name="bmiRange" value="35+" />
</div>
<div id="family">
<p>Does anybody in your family have Diabetes?</p>
<label for="history">No</label>
<input type="radio" name="familyHistory" value="No" />
<label for="history">Grandparent</label>
<input type="radio" name="familyHistory" value="Grandparent" />
<label for="history">Sibling</label>
<input type="radio" name="familyHistory" value="Sibling" />
<label for="history">Parent</label>
<input type="radio" name="familyHistory" value="Parent" />
</div>
<div id="diet">
<p>How would you describe your diet?</p>
<label for="diet">Low sugar</label>
<input type="radio" name="dietHabits" value="Low sugar" />
<label for="diet">Normal sugar</label>
<input type="radio" name="dietHabits" value="Normal sugar" />
<label for="diet">Quite high sugar</label>
<input type="radio" name="dietHabits" value="Quite high sugar" />
<label for="diet">High sugar</label>
<input type="radio" name="dietHabits" value="High sugar" />
</div>
<button onclick="getValue()">Calculate</button>
<p id="message"></p>

Change == to = when assigning values.
ageNumerical == 0;
to
ageNumerical = 0;

auto search with checkbox inside textbox from databases

I can able to load value from databases to text-box...so now named as auto..from this i want to create a auto search with multiple check box to select multiple value in text-box java script...its possible ...??
<form name="form1">
<input type="checkbox" name="checkboxname" value="a">
<input type="checkbox" name="checkboxname" value="b">
<input type="checkbox" name="checkboxname" value="c">
</form>
<form name="form2">
<input type="text" name="textname">
</form>
var textbox = document.getElementsByName("textname")[0];
var checkboxes = document.getElementsByName("checkboxname");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = (function(chk){
return function() {
var value = "";
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
if (value === "") {
value += checkboxes[j].value;
} else {
value += "," + checkboxes[j].value;
}
}
}
textbox.value = value;
}
})(checkbox);
}

Try this,
<form name="form1" class="form_chk">
<input type="checkbox" name="checkboxname" value="a" class="chk_box">a
<input type="checkbox" name="checkboxname" value="b" class="chk_box">b
<input type="checkbox" name="checkboxname" value="c" class="chk_box">c
</form>
$( "#txt_search" ).blur(function(e) {
var $search = $(e.currentTarget),
search_str = $search.val().toLowerCase(), $chk,
$chk_ele = $('.chk_box').filter(function(index, chk){
if($(chk).val().toLowerCase().search(search_str) !== -1){
return $(chk);
}
});
$('.chk_box').prop('checked', false);
$chk_ele.prop('checked', true);
});
See the output : http://jsfiddle.net/J7dUz/