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
Related
I am creating a PHP form and can't figure out how to disable all the checkboxes if NONE option is selected.
<h5>HEALTH OF STUDENT</h5>
<p>Are there any physical, emotional, or other difficulties that we should be aware of?</p>
<table>
<td>Hearing
<input type="checkbox" name="Audition" value="Yes" />
</td>
<td>Vision
<input type="checkbox" name="Vision" value="Yes" />
</td>
<td>Heart
<input type="checkbox" name="Coeur" value="Yes" />
</td>
<td>Langage
<input type="checkbox" name="Speech" value="Yes" />
</td>
<td>Asthme
<input type="checkbox" name="Asthma" value="Yes" />
</td>
<td>Diabetes
<input type="checkbox" name="Diabete" value="Yes" />
</td>
<td>Allergies
<input type="checkbox" name="Allergies" value="Yes" />
<input type="checkbox" name="Allergies" value="Yes" />
<input type="checkbox" name="None" value="Yes" />
</td>
<td>Other
<input type="checkbox" name="Autre" value="Yes" />
</td>
<td>If other, Specify
<input type="text" name="autre2" id="autre2" />
</td>
</table>
The easiest way I see to do this is by adding a class to every of your checkbox that needs to be disabled by the NONE one and then deselect every one when you click on it with a jQuery .find() and .each() function to grab them all :
<input class="isOneOfThem" type="checkbox" name="Audition" value="Yes" />
<input class="isOneOfThem" type="checkbox" name="Vision" value="Yes" />
<!-- etc.. -->
<input onchange="deselectAllOfThem(this)" type="checkbox" name="NONE" value="Yes" />
-
function deselectAllOfThem(noneOne) {
if(noneOne.checked) { // if the NONE checkbox is checked
// looking for every HTML elements with the isOneOfThem class
// within the table element
$('table').find('.isOneOfThem').each(function() {
// just uncheck the element in the .each() loop
$(this).prop('checked', false);
})
}
}
When I uncheck any checkbox it also appends the result. I want to remove that. What should I do?
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
$(document).ready(function() {
$('.chk_val').on('click', function() {
var result = $('.chk_val:checked').map(function() {
return $(this).val()
}).get();
$('#course').html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
Map the value of checked items.
Use .html() to change the html of the div
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')
})
});
Please help me how to identify if a checkbox with specific id is checked/unchecked.
<input name="A" id="test" type="checkbox" value="A" />
<input name="B" id="test" type="checkbox" value="B" />
<input name="C" id="test1" type="checkbox" value="C" />
<input name="C" id="test1" type="checkbox" value="D" />
If i check the checkbox with id="test" and name="a", then the event should fire and otherwise it should not for rest of the checkbox with different id other than "test"
Please help
Since you tag JQuery you can find it helpful
AAA <input type="checkbox" id="test" />
BBB <input type="checkbox" id="test1" />
CCC <input type="checkbox" id="test2" />
and
$( "input" ).on( "click", function() {
// for a specific one, but you can add a foreach cycle if you need more
if($('#test').is(":checked")){
alert('is checked!');
}else {
alert('is NOT checked!');
}
});
Element IDs in a given document must be unique! Hence, change your HTML to something like below and take a look at the script.
$(function() {
$(":checkbox").on("change", function() {
//When the id is test1
//And name is A
//And it's checked
if (this.id === "test1" && this["name"] === "A" && this.checked) {
alert ("Checkbox with name A and ID test1 is checked");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" id="test1" type="checkbox" value="A" />
<input name="B" id="test2" type="checkbox" value="B" />
<input name="C" id="test3" type="checkbox" value="C" />
<input name="C" id="test4" type="checkbox" value="D" />
Id's must be Unique.... otherwise when you use document.getElementById();
It will select First occurence of specific Id...
Instead implement like this..
<input name="A" type="checkbox" value="A" />
<input name="B" type="checkbox" value="B" />
<input name="C" type="checkbox" value="C" />
<input name="C" type="checkbox" value="D" />
and trigger a event on click oncheck box and use document.getElementsByName('');
I have a div structure like the below,
<div id-"itemsRows">
<ul id="row1">
<input type="hidden" id="hfId" value="1" />
<input type="hidden" id="hfOrd" value="2" />
<input type="hidden" id="hfDate" value="3" />
<li class="popup"> <div id="p1"></div> <div id="p2"></div></li>
</ul>
<ul id="row2">
<input type="hidden" id="hfId" value="4" />
<input type="hidden" id="hfOrd" value="5" />
<input type="hidden" id="hfDate" value="6" />
<li class="popup"> <div id="p2"></div> <div id="p2"></div> </li>
</ul>
<ul id="row3">
<input type="hidden" id="hfId" value="2" />
<input type="hidden" id="hfOrd" value="3" />
<input type="hidden" id="hfDate" value="4" />
<li class="popup"> <div id="p3"></div> <div id="p3"></div></li>
</ul>
</div>
Now i have a html got via ajax call which looks like this,
<ul id="ajaxrows">
<li>
<input type="hidden" id="hfId" value="1" />
<input type="hidden" id="hfOrd" value="2" />
<input type="hidden" id="hfDate" value="3" />
<div id="p11"></div> <div id="p12"></div>
</li>
<ul>
<ul id="ajaxrows">
<li>
<input type="hidden" id="hfId" value="4" />
<input type="hidden" id="hfOrd" value="5" />
<input type="hidden" id="hfDate" value="6" />
<div id="p22"></div> <div id="p32"></div>
</li>
<ul>
Now i have to compare these two structures and match all the hiddenfield values. If all the three matches i have to replace the two divs inside the UL row1 with the divs from ajaxrows.. Any idea how this can be done in jquery?
This should give you a start
$('#itemsRows ul').each(function () { // go thru row uls
var $this = $(this);
var rows_arr = $(this).find('input').map(function () { // create an array with the input
return this.value;
}).get();
$('#wrap-ajax ul').each(function () { // I wrapped this in a div to better loop it
var ajx_arr = $(this).find('input').map(function () {
return this.value;
}).get();
if (rows_arr.toString() === ajx_arr.toString()) { // lazy meh way to compare arrays
console.log(rows_arr, ajx_arr);
$(this).find('div').appendTo($this.find('li.popup').empty()); // delete the old and put the new
}
});
});
FIDDLE
I am assuming that number blocks are same and the number of inputs in each block has same count.
$($("#itemsRows ul")).each(function( index ){
var ajaxResult = $($("#ajaxrows li"))[index];
var count =0;
$($(this).find("input")).each(function( index2 ){
var res = $(ajaxResult).find("input")[index2];
if($(this).val() == $(res).val()){
count++;
}
});
var ajaxResultDivs = $($("#ajaxrows li")[index]).find("div");
if(count == $(this).find("input").length){
$($(this).find("div")).each(function( index ){
$(this).replaceWith($(ajaxResultDivs));
});
}
});
console.log($("#itemsRows"));
FIDDLE