I need to calculate the value total, which is a product of initial value (let's say 10) and the factors A, B, C and D, which are equal to, let's say 2, 3, 4 and 5.
The combination of factors should be selected by user via checking the corresponding boxes. The problem is that I need to repeat this many times independently in a form and the solution below (for two of these sections) does not separate this process correctly. If these were text values, I would do e.g. var $text = $(".result", $section);
Basically, I do not understand how to relate numerical variable to these sections. Also, it would be great to have this initial value (10) in the Result field even if none of the boxes are checked.
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
var total = 10;
$(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$('.result').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
I assume that you want the rows to be independent:
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section"),
initial = parseInt($section.find('.result').data('initial')),
total = initial;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total === initial ? initial : total);
});
// getting the total values
$(".res_button").click(function() {
var $section = $(this).closest(".section");
var total = $section.find('.result').val();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="10" value="10" class="result"></label>
<label><button class="res_button">Result 1 line</button></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="20" value="20" class="result"></label>
<label><button class="res_button">Result 2 line</button></label>
</div>
$(document).ready(function() {
$(".factor-checkbox").click(function() {
var $section= $(this).closest(".section")
var total = 10;
$section.find(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find(".result").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
Related
I have 5 html checkboxes, but every time they have different value, I want when everytime when i check or uncheck checkbox to call this js function to get all checked chexbox and add it to hiden input
This is my html
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="1" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="2" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="3" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="4" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="5" onchange="getValue(this.value)">
<input type="hidden" id="ticketsPay" name="ticketsPay" value="">
And this is my js
let myArray = (function() {
let a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
document.getElementById('ticketsPay').value = myArray.toString();
JS dont save in hidden input all checked checkbox any idea?
Here's an example that uses Array.prototype.reduce and accounts only the checked ones:
const EL_inp = document.querySelector("#ticketsPay");
const ELs_ckb = document.querySelectorAll('[name="checkbox"]');
const setChecked = () => {
EL_inp.value = [...ELs_ckb].reduce((a, EL) => {
if (EL.checked) a.push(EL.value);
return a;
}, []);
};
ELs_ckb.forEach(EL => EL.addEventListener("input", setChecked));
<input type="checkbox" class="checkbox" name="checkbox" value="1">
<input type="checkbox" class="checkbox" name="checkbox" value="2">
<input type="checkbox" class="checkbox" name="checkbox" value="3">
<input type="checkbox" class="checkbox" name="checkbox" value="4">
<input type="checkbox" class="checkbox" name="checkbox" value="5">
<input id="ticketsPay" name="ticketsPay" value="" readonly>
I'm a student and I'm going to make a page about the exam.
I'd like to divide several checkboxes so they don't overlap and total sum.
How can I have "q1" and "q2" operate separately?
Only one is checked per question, and whether two are sum together.
<script type="text/javascript">
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk){
var obj = document.getElementsByName("q1");
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
</script>
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
Update your checkOnly function to add name as arg:
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
In the HTML update the method, pass name as second arg:
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this, 'q2')" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="2"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="3"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="4"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="2"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="3"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="4"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?
Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});
You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
I am implementing Multiple select with checkboxes and jQuery as described at http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery
This is the example shown in the website:
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
The dropdown list with checkboxes is showing as expected. Please note that there are three such lists being displayed on one page. How to identify them individually?
The question is how do I determine using javascript which of the checkboxes under each of the lists have been selected. I also need to obtain the value of the selected item. Which of these have to tagged with an id?
$('input[type="checkbox"]').on('change',function(){
$(this).closest('.multiselect').find('span').empty();
$(this).closest('.multiselect').find('input[type="checkbox"]:checked').each(function(){
$(this).closest('.multiselect').find('span').append($(this).val()+' | ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
you can try this below, it will display the value of each checkbox who is checked
function check(){
var e = document.getElementsByClassName('check-box');
var total = e.length;
for (var i=0; i<total; i++){
if (total[i].checked){ alert(total[i].value); }
// or alert(i); if you just need the index
}
}
Here is an example which may help you:
$(':checkbox').change(function(){
var liste2 = $(':checkbox:checked').map(function() {
return this.value;
}).get();
$('span').text(liste2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<br>
Checked values: <span></span>
</div>
I want to set array vlaues as checked in checkbox using jquery
I have three values in one array and want to set as checked value of checkbox.
Here you go with the solution https://jsfiddle.net/41etxeyy/1/
var arr = [2,5,6];
for(var i=0; i<arr.length; i++){
$('input[type="checkbox"][value="' + arr[i] +'"]').prop('checked', 'checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="1" />1 <br/>
<input type="checkbox" name="checkbox" value="2" />2 <br/>
<input type="checkbox" name="checkbox" value="3" />3 <br/>
<input type="checkbox" name="checkbox" value="4" />4 <br/>
<input type="checkbox" name="checkbox" value="5" />5 <br/>
<input type="checkbox" name="checkbox" value="6" />6 <br/>
<input type="checkbox" name="checkbox" value="7" />7 <br/>
I guess this is what you are looking for.