Get value from selected Checkbox value using Java Script/JQuery [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I need to get selected dynamically generated checkbox value using Javascript/jQuery.
Below the code I am using. I need to get id from selected checkbox.
function GetSelectedId() {
var array = []
$("input:checkbox[name=type]:checked").each(function() {
alert(array.push($(this).val()));
});
}
<td><input type="checkbox" name="type" id="400" /> </td>.
<td><input type="checkbox" name="type" id="401" /> </td>

You can get the inputs fields with the name type which are checked in JQuery by
$('input[name="type"]:checked');
Then you can map the id's to a new array
inps.map(x => x.id)
Hence you can use map you have to make the result of the query iterable by
let inps = [...$('input[name="type"]:checked')];
Then you can return the array in your function
function getSelectedId() {
// ...
return inps.map(x => x.id)
}
Note: Function names usually starts with a lowercase letter
function getSelectedId() {
let inps = [...$('input[name="type"]:checked')];
return inps.map(x => x.id)
}
const arr = getSelectedId();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><input type="checkbox" name="type" id="400" checked/> </td>.
<td><input type="checkbox" name="type" id="401" /> </td>

Related

Put value null if none of checkbox is selected [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 10 months ago.
Improve this question
get_genre_value=this.value; //setting value of current check box to get_genre_value.
Here i had globally declared var get_genre_value; which is necessary for my project and I am taking the value from get_genre_value on button click. Selecting checkbox value and getting it was easy but how am I able to set the value to null for get_genre_value if no check box is selected this got me thinking hard, as the get_genre_value will use its value stored globbaly if I try to click the button second time without selecting any checkbox , any help would be much appreciated.
Here is an example how to do it:
You set get_genre_value to null in the beginning.
For each checkbox you add an EventListener. In the callback you check, if the checkbox is checked:
It is: You uncheck the checkbox that was checked before (it is perhaps null if no checkbox was checked before) and set get_genre_value to the value of the checkbox
It is not: You set get_genre_value to null again
let get_genre_value = null;
const checkboxes = document.querySelectorAll("input[name=select]");
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", (event) => {
if (event.target.checked) {
const checkedbefore = document.querySelector(`input[name=select][value=\"${get_genre_value}\"]`);
if (checkedbefore !== null)
checkedbefore.checked = false;
get_genre_value = event.target.value;
} else {
get_genre_value = null;
}
console.log(get_genre_value);
});
});
<input type="checkbox" name="select" value="1">
<input type="checkbox" name="select" value="2">
<input type="checkbox" name="select" value="3">
<input type="checkbox" name="select" value="4">

Show sum of values for all checkboxes that are checked [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I’m creating an HTML form and want to achieve the following with JS, please provide the code i should use to do so.
1.Add values of all the checked checkboxes and show them as total.
2.Add a restriction the user must select at least 2 checkboxes.
Here is my code.
<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />
<p>Your Total is = </p>
Also code should be such that if i add or remove checkboxes i should not have to modify the JS code too.
Get all the checkbox using document.getElementsByClassName.This will give a collection. Using ... spread operator you can convert it to array and use forEach to loop over them and add an change event listener. and update the total on it's change.The value of the checkbox is string so using parseInt convert it to number
let total = 0;
[...document.getElementsByClassName('iput')].forEach(function(item) {
item.addEventListener('change', function(e) {
if (e.target.checked) {
total += parseInt(e.target.value, 10)
} else {
total -= parseInt(e.target.value, 10)
}
document.getElementById('total').innerHTML = total
})
})
<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />
<p id="total">Your Total is = </p>
Assuming you only have inputs of type checkbox.
var checkboxes = document.getElementsByTagName('input');
var sum = 0;
checkboxes.forEach(function(checkbox){
if (checkbox.checked) {
sum += checkbox.value;
}
});
console.log(sum); // your sum

Jquery selector for all elements with class in a form that are after one element [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I need to find all elements with class 'complexList' in form that are after 'el'.
Example
var el = $(this);
var els = $('#' + obj.tableId + '_editorForm').find('.complexList');
el.nextAll('.complexList') //dont work
Thanks
If nextAll doesn't work, it means there are elements at various levels of nesting. But you can still do it, with index and slice.
els = els.slice(els.index(el) + 1);
index, when called as above, finds the index of the given element in the matched set; slice returns a subset of elements from a set. So we ask for the subset starting with the element after el.
Example:
var obj = {
tableId: "foo"
};
$(document.body).on("click", ".complexList", function() {
var el = $(this);
var els = $('#' + obj.tableId + '_editorForm').find('.complexList');
els.css("color", ""); // clear previous
els = els.slice(els.index(el) + 1);
els.css("color", "blue");
});
All of the text fields below are `.complexList` fields. Click any of them to turn all `.complexList` elements <em>after</em> it blue.
<form id="foo_editorForm">
<label>
Field 1:
<input type="text" class="complexList" value="field1">
</label>
<label>
Field 2:
<input type="text" class="complexList" value="field2">
</label>
<label>
Field 3:
<input type="text" class="complexList" value="field3">
</label>
<label>
Field 4:
<input type="text" class="complexList" value="field4">
</label>
<label>
Field 5:
<input type="text" class="complexList" value="field4">
</label>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript to multiply product price and quantity [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I write javascript code to multiply product price to the quantity input in the input field but it's not working can somebody have any idea where is the problem..
javascript
<script language="javascript" type="text/javascript">
function multiply(){
a=Number(document.abc.QTY.value);
b=Number(document.abc.PPRICE.value);
c=a*b;
document.abc.TOTAL.value=c;
}
</script>
form
<input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /><br />
<input type="text" name="PPRICE" id="PPRICE" value="<?php echo $product['pprice']; ?>" /><br />
<input type="text" name="TOTAL" id="TOTAL" /><br />
I'm not quite sure where you're getting abc from but you should be using document.getElementById(). Change your function code to the following and all will be well.
function multiply()
{
// Get the input values
a = Number(document.getElementById('QTY').value);
b = Number(document.getElementById('PPRICE').value);
// Do the multiplication
c = a*b;
// Set the value of the total
document.getElementById('TOTAL').value=c;
}
function hitungTotal(){
var qty = document.getElementById("newQuantity").value;
var price ="";
var totPrice =qty * price;
document.getElementById("newTotal").value = totPrice;
}
function total() {
let qty = $('.qty').val();
let price = $('.price').val()
$('.total').val(qty * price)
};

How to find out whether the check box is checked or not checked? [duplicate]

This question already has answers here:
How do I check whether a checkbox is checked in jQuery?
(68 answers)
Closed 9 years ago.
I have below code in my jsp.
<input type="checkbox" name="transport" id="bike" value="Bike"> I have a bike
<input type="checkbox" name="transport" id="car" value="Car"> I have a car
<input type="checkbox" name="transport" id="cycle" value="cycle"> I have a cycle
using jQuery I have to get all values whose check box is checked. How can I get the values whose check box is checked?
I'm not too familiar with jQuery, but try this:
var values = [];
$('input[name="transport"]').each(function () {
if ( $(this).is(':checked') ) {
values.push( $(this).attr('value') );
}
});
alert(values);
Try this:
$('#bike').is(':checked');
$(':checkbox[name=transport]:checked').each(function (i, ele) {
var value = $(ele).val();
console.log(value);
});

Categories