We Keep Coding

How to get ID of checked checkboxes from foreach loop

I have a foreach loop creating a checkbox for each record from a table in my Db as follows:
#foreach (var item in Model)
{
<input id="#item.extras_id" name="#item.extra_name" type="checkbox" value="#item.rate" />
<span>#item.extra_name</span>
<span style="float: right; padding-right: 16px;">R #item.rate.00</span>
<br />
}
My question is, Is there a way from me to retrieve the ID's of all checked checkboxes?

You can try this
Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(i => (i.id));

using JS I'd do
// add event to the button for the demo
document.getElementById("getChecked").onclick = getChecked;
function getChecked() {
// get all inputs of the page
// use node.getElementsByTagName("input") to get only child of node
inputs = document.getElementsByTagName("input")
checked = []
for (let input of inputs) {
// for each element look if it is checked
if (input.checked) checked.push(input)
}
// here I log because can't return from event but you could return it
console.log(checked)
}
<input id="1" name="a" type="checkbox" value="1" /> <span>a</span>
<br />
<input id="2" name="z" type="checkbox" value="2" /> <span>b</span>
<br />
<input id="3" name="e" type="checkbox" value="3" /> <span>c</span>
<br />
<input id="4" name="r" type="checkbox" value="4" /> <span>d</span>
<br />
<input id="5" name="t" type="checkbox" value="5" /> <span>e</span>
<br />
<button id="getChecked">getChecked()</button>
Edit : I'd prefer Vlad Yaremenko's answer which does the same in a more concise format

get selected value of radio button

I am new to Javascript. I have a code snippet like this:
<ul class="dropdown-menu dropdown-menu-right" onchange="onCompChange()">
<div class="radio" id = "compSelect">
<label><input type="radio" name="optradio">op1</label>
</br>
<label><input type="radio" name="optradio">op2</label>
</br>
<label><input type="radio" name="optradio">op3</label>
</div>
</ul>
On selecting a radio button, I want to know which option is selected (op1/op2/op3).

How about this:
<input type="radio" name="opt radio" onclick="check(this.value)" value="op1" >op1</label>
<input type="radio" name="opt radio" onclick="check(this.value)" value="op2" >op2</label>
<input type="radio" name="opt radio" onclick="check(this.value)" value="op3" >op3</label>
in your .js:
function check(value) {
//... use your value
}

<ul class="dropdown-menu dropdown-menu-right" >
<div class="radio" id = "compSelect">
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op1</label>
</br>
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op2</label>
</br>
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op3</label>
</div>
</ul>
<script type = "text/javascript" language = "javascript">
function onCompChange(radio){
var content = radio.parentElement.innerHTML;
var output = content.replace(/<\/?[^>]+(>|$)/g, "");
alert(output);
}
</script>

To get the value of the selected radioName item of a form with id myForm:
$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#myForm input').on('change', function() {
var value = $('input[name=radioName]:checked', '#myForm').val();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
Think this helps you.

Jquery uncheck checkboxes siblings on check

I would like to have just one checkbox checked at the same time.
I would like to have the value checked.
It works if I remove all div tag but I need to have div tag for the organisation.
So my js code :
$('.myCheckbox').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
var value = $(this).val();
console.log("value = "+value);
});
And my html code which works without div but not with div :
<div id="id_1" class='class_1'>
<div id="id_a" class='class_a'>
<div>
<img src="fr.png">
<input type="checkbox" class="myCheckbox" value="fr" />
</div>
<div>
<img src="cs.png">
<input type="checkbox" class="myCheckbox" value="cs" />
</div>
<div>
<img src="en.png">
<input type="checkbox" class="myCheckbox" value="en" />
</div>
</div>
<div id="id_b" class='class_b'>
<div>
<img src="bc.png">
<input type="checkbox" class="myCheckbox" value="bc" />
</div>
<div>
<img src="tl.png">
<input type="checkbox" class="myCheckbox" value="tl" />
</div>
<div>
<img src="jk.png">
<input type="checkbox" class="myCheckbox" value="jk" />
</div>
</div>
</div>

$('.myCheckbox').click(function() {
$('.myCheckbox').prop('checked', false);
$(this).prop('checked') ? $(this).prop('checked', false) : $(this).prop('checked', true);
var value = $(this).val();
console.log("value = "+value);
});

You current situation is perfect candidate for use of radios instead, you need to group them by name:
<div id="id_1" class='class_1'>
<div id="id_a" class='class_a'>
<div>
<img src="fr.png">
<input type="radio" name='langa' class="myRadio" value="fr" />
</div>
<div>
<img src="cs.png">
<input type="radio" name='langa' class="myRadio" value="cs" />
</div>
<div>
<img src="en.png">
<input type="radio" name='langa' class="myRadio" value="en" />
</div>
</div>
<div id="id_b" class='class_b'>
<div>
<img src="bc.png">
<input type="radio" name='langb' class="myRadio" value="bc" />
</div>
<div>
<img src="tl.png">
<input type="radio" name='langb' class="myRadio" value="tl" />
</div>
<div>
<img src="jk.png">
<input type="radio" name='langb' class="myRadio" value="jk" />
</div>
</div>
</div>
Then you can use this script:
$('.myRadio').change(function() {
var value = $(this).val(); // this will get you the checked radio value.
console.log("value = "+value);
});

Define checkboxes with same name like
<input type="checkbox" class="myCheckbox" value="bc" name="common_name" />

First find the parent siblings then:
$('.myCheckbox').click(function() {
$(this).parent().siblings().find('input:checkbox').prop('checked', false);
});

By definition checkboxes are used when you want to give the option to select multiple options to the user. If you want him to select only one value use radios instead :)
Example -
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
But if this has to be done by checkboxes you can try this :)
<input type = "checkbox" name = "sample" value = "1">firsr
<input type = "checkbox" name = "sample" value = "2">second
<input type = "checkbox" name = "sample" value = "3">third
Javascript
$(document).ready(function() {
$('input[name=sample]').click(function(e){
$( "input[name=sample]").prop('checked', false);
$(this).attr('checked','checked')
})
});

How can i find the total number of elements in a form?

I try to store the length of a form on a variable but it doesnt work.This is my first attempt with javascript.
var lista = new Array();
var numOfEl = document.psonia.elements.length;
function ektipwsi() {
for(var i=0; i < numOfEl ; i++){
if(document.psonia.elements[i].checked) {
lista.push(document.psonia.elements[i].value);
}
};
I also tried with getElementById or getElementByTag with no luck.
This is the entire form i use
<div>
<form name="psonia">
<div class = "laxanika">
<h2 class="epik">Λαχανικά</h2>
<div class="transp">
<input type="checkbox" value="Ντομάτες">Ντομάτες<br>
<input type="checkbox" value="Πατάτες">Πατάτες<br>
<input type="checkbox" value="Αγγούρια">Αγγούρια<br>
<input type="checkbox" value="Μελιτζάνες">Μελιτζάνες<br>
<input type="checkbox" value="Κρεμμύδια">Κρεμμύδια<br>
<input type="checkbox" value="Κρεμ.Στιφ.">Κρεμ.Στιφ.<br>
<input type="checkbox" value="Μαρούλι">Μαρούλι<br>
<input type="checkbox" value="Λάχανο">Λάχανο<br>
<input type="checkbox" value="Πιπεριές">Πιπεριές<br>
<input type="checkbox" value="Φλωρίνης">Φλωρίνης<br>
<input type="checkbox" value="Σκόρδα">Σκόρδα<br>
<input type="checkbox" value="Ρόκα">Ρόκα<br>
<input type="checkbox" value="Κολοκύθια">Κολοκύθια<br>
<input type="checkbox" value="Μανιτάρια">Μανιτάρια<br>
</div>
</div>
<div class="kreata">
<h2 class="epik">Κρέατα</h2>
<div class="transp">
<input type="checkbox" value="Λαιμός">Λαιμός<br>
<input type="checkbox" value="Χοιρινές">Χοιρινές<br>
<input type="checkbox" value="Μοσχαρίσιες">Μοσχαρίσιες<br>
<input type="checkbox" value="Παϊδάκια">Παϊδάκια<br>
<input type="checkbox" value="Κοτόπουλο">Κοτόπουλο<br>
<input type="checkbox" value="Μοσχάρι">Μοσχάρι<br>
<input type="checkbox" value="Κατσίκι">Κατσίκι<br>
<input type="checkbox" value="Κιμάς">Κιμάς<br>
</div>
<div class="galaktokomika">
<h2 class="epik">Γαλακτοκομικά</h2>
<div class="transp">
<input type="checkbox" value="Γάλα">Γάλα<br>
<input type="checkbox" value="Γιαούρτι">Γιαούρτι<br>
<input type="checkbox" value="Βούτυρο">Βούτυρο<br>
<input type="checkbox" value="Ρεγκάτο">Ρεγκάτο<br>
<input type="checkbox" value="Κρέμα γάλακτος">Κρέμα γάλακτος<br>
<input type="checkbox" value="Τζατζίκι">Τζατζίκι<br>
<input type="checkbox" value="Τυροκαφτερή">Τυροκαφτερή<br>
<input type="checkbox" value="Αυγά">Αυγά<br>
</div>
</div>
</div>
<div class="thalassina">
<h2 class="epik">Θαλασσινά</h2>
<div class="transp">
<input type="checkbox" value="Γαρίδες">Γαρίδες<br>
<input type="checkbox" value="Μύδια">Μύδια<br>
<input type="checkbox" value="Καλαμάρι">Καλαμάρι<br>
<input type="checkbox" value="Θαλασσινά">Θαλασσινά<br>
<input type="checkbox" value="Αθερίνα">Αθερίνα<br>
</div>
</div>
</form>

You are referencing everything you need in question:
document.psonia.elements
is an HTMLFormControlsCollection, and like all collections, it is array-like with a length property.
document.psonia.elements.length
Update
I have no idea what you are asking. I cut-and-pasted your form into my editor and used my search function to look for the number of input elements you have. My editor found 35.
console.log(document.psonia.elements.length);
also returns 35.

Try something like
var allElements = document.getElementsByTagName('*');
for (var i=0;i<allElements.length;i++){
//console.log(allElements[i].id)
}

i moved the counter of the elements inside the function and now it works.Thank you!
function ektipwsi() {
var numOfEl = document.psonia.elements.length;
for(var i=0; i < numOfEl ; i++){
if(document.psonia.elements[i].checked) {
lista.push(document.psonia.elements[i].value);
}
};

How to add value of checked checkbox to textarea using jQuery?

How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4

Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle

You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.