I have some checkboxes that I am getting the values into an array:
<ul>
<li><input type="checkbox" name="daily[]" value="0"></li>
<li><input type="checkbox" name="daily[]" value="1"></li>
<li><input type="checkbox" name="daily[]" value="2"></li>
<li><input type="checkbox" name="daily[]" value="3"></li>
<li><input type="checkbox" name="daily[]" value="4"></li>
</ul>
I am using this function to get the values into the array:
var days = $('input[name^='+daily+']:checked').map(function(){
return parseInt($(this).val(),10);
}).get();
This is working well..
But now I want to do the inverse.. To fill an edit form, I want to check the checkboxes when having the array. How could I do that in a good way?
Iterate the array - create a selector for the checkbox element - verify the element exists - set the checked property:
for (var i = 0; i < days.length; i++) {
var value = days[i];
var selector = 'ul li input[value="' + value + '"]')
var elem = $(selector);
if (elem) {
elem.prop("checked", true);
}
}
Or:
$('input[name^='+daily+']').prop("checked", function() {
return days.indexOf(this.value) > -1;
});
You can do it like,
var arr = ["2","3","4"];
var elems = $('input[name^='+daily+']');
arr.forEach(function(val){
elems.filter("[value="+ val +"]").prop("checked",true);
});
DEMO
Points to be noted:
Try to cache your selector outside the iteration phase, that would
improve the performance.
Iterating over all the elements and checking its value against the
array would cause severe performance drawback when you have 100+
elements and your array size is 2.
You could do this :
var days = [0, 2, 3];
var $checkboxes = $('input[name^=daily]');
days.forEach(function(day) {
$checkboxes.get(day).checked = true;
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<ul>
<li><input type="checkbox" name="daily[]" value="0"></li>
<li><input type="checkbox" name="daily[]" value="1"></li>
<li><input type="checkbox" name="daily[]" value="2"></li>
<li><input type="checkbox" name="daily[]" value="3"></li>
<li><input type="checkbox" name="daily[]" value="4"></li>
</ul>
(see also this Fiddle)
Related
I'm wondering if there would be away to get the values of checked checkboxes and than use the values in the filter function in my DeleteObject function.
<div style="text-align:center" class="list">
<small>Walls:</small><input id="deleteCheckbox" type="checkbox" value="Wall">
<small>Doors:</small><input id="deleteCheckbox" type="checkbox" value="Door">
<small>Traps:</small><input id="deleteCheckbox" type="checkbox" value="SlowTrap"><br>
<small>Mines:</small><input id="deleteCheckbox" type="checkbox" value="GoldMine">
</div>
Javascript:
function DeleteObject() {
var b = Game.currentGame.ui.buildings;
Object.keys(b).filter(function(e) {
return CheckBoxValuesHere == b[e].type;
}).forEach(function(i) {
Game.currentGame.network.sendRpc({
name: "DeleteObject",
uid: b[i].uid
})
})
}
As mentioned in the comments, id's should be unique. To get the values of checked checkboxes, add change event to the input with type checkbox and then grab input with checked checkboxes.
document.querySelectorAll('input[type="checkbox"]')
.forEach(input => {
input.addEventListener('change', function() {
const values = [...document.querySelectorAll('input:checked')].map(input => input.value);
console.log(values);
});
});
<div style="text-align:center" class="list">
<small>Walls:</small><input id="deleteCheckbox" type="checkbox" value="Wall">
<small>Doors:</small><input id="deleteCheckbox" type="checkbox" value="Door">
<small>Traps:</small><input id="deleteCheckbox" type="checkbox" value="SlowTrap"><br>
<small>Mines:</small><input id="deleteCheckbox" type="checkbox" value="GoldMine">
</div>
function getItemsToDelete() {
// get a nodeList of all selected elements,
// convert it to an array and return an
// array of the values.
return Array.from(
document.querySelectorAll(
'input[name=deleteCheckbox]:checked'
)
).map( item => item.value );
}
console.log(getItemsToDelete());
<ul style="list-style:none">
<li><input name="deleteCheckbox" type="checkbox" value="Wall"><small>Walls</small></li>
<li><input name="deleteCheckbox" type="checkbox" value="Door" checked><small>Doors</small></li>
<li><input name="deleteCheckbox" type="checkbox" value="SlowTrap"><small>Traps</small></li>
<li><input name="deleteCheckbox" type="checkbox" value="GoldMine"><small>Mines</small></li>
</ul>
Add unique names or IDs to each checkbox and assign them listeners to click event (in JS code) or directly in HTML. Then in JS refer to checkbox value with document.getElementById(<ID>).value.
I'm trying to reactivate a checkbox in a dynamic list and I do not succeed, the list update its contents every x time.
<div class="content">
<ul class="mylist">
<li><input type="checkbox" class="check" checked>0</li>
<li><input type="checkbox" class="check">1</li>
<li><input type="checkbox" class="check">2</li>
<li><input type="checkbox" class="check">3</li>
<li><input type="checkbox" class="check">4</li>
<li><input type="checkbox" class="check">5</li>
<li><input type="checkbox" class="check">6</li>
<li><input type="checkbox" class="check">7</li>
</ul>
</div>
// checkbox
var checkbox;
var list = [2,3,4,5,6,7,8,9];
//
setInterval(function(){
$('.mylist li').remove();
for(i in list) {
$('.mylist').append('<li><input type="checkbox" class="check">' + i + '</li>');
}
if(typeof checkbox === 'object')
checkbox.prop('checked', true);
}, 3000);
$('.check').on('click', function(){
if ($(this).is(":checked")) {
checkbox = $(this);
}
});
https://jsfiddle.net/ywkr5ezp/3/
The reason this is happening is because the input element stored in checkbox is not the same as the new input element that you are creating. When you store an element in a variable it is storing that specific instance of the element.
One way around this would be to give the checkbox elements id's that you could then reference and recheck.
I want to make a separate function from my checkall and uncheckall button (I already have one working).
This time I want my checkall/uncheckall chekcbox checked if all children checkboxes are checked.
I was thinking maybe I can compare my checked children checkbox length from children checkbox length.
function testFunction() {
$('.cb').change(function(){
var checkedChildCheckBox = $('.cb:checked').length;
var numberOfChildCheckBoxes = $('.cb').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes){
$("#checkAll").prop('checked', true);
}
})
}
Can someone give me some ideas on this? Still my checkall/uncheckall checkbox doesn't changed to checked. Conditions made was true in if statement.
Or maybe my idea of comparing length is not gonna work?
.cb my class for children checkbox
#checkall my id for parent or checkall/uncheckall checkbox
It is already working I guess - issue is putting the event listener inside a function (don't know why is that the case).
Anyway, see demo below:
var numberOfChildCheckBoxes = $('.cb').length;
$('.cb').change(function() {
var checkedChildCheckBox = $('.cb:checked').length;
if (checkedChildCheckBox == numberOfChildCheckBoxes)
$("#checkAll").prop('checked', true);
else
$("#checkAll").prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkAll">All</label>
<input type="checkbox" id="checkAll" />
<br/>
<br/>
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
<input class="cb" type="checkbox" />
Try below code
Js
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
Html
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>
I am attempting to populate an array (rulesArray) with the labels associated with checked checkboxes. I am also trying to be sure I only add unique values (this is where the !inArray comes in). I'm pretty sure at this point that this is incorrect syntax for inArray.
Currently my error is "Uncaught ReferenceError: inArray is not defined."
Here is my JS
$(document).ready(function(){
var rulesArray = [];
$('input:checkbox').click(function(){
$('input.selectBox').each(function(){
if(($(this).is(':checked')) && (!inArray($(this).parent().text(), rulesArray))){
rulesArray.push($(this).parent().text());
}
});
console.log(rulesArray);
});
});
Here is my HTML
<div>
<button class="toggle_button" data-contents=".item_8"></button>
<ul class="contents item_8">
<li><input class="selectBox" type="checkbox" id="color_1" name="color_1" value=""><label for="color_1">Red</label></li>
<li><input class="selectBox" type="checkbox" id="color_2" name="color_2" value=""><label for="color_2">Orange</label></li>
<li><input class="selectBox" type="checkbox" id="color_3" name="color_3" value=""><label for="color_3">Yellow</label></li>
<li><input class="selectBox" type="checkbox" id="color_4" name="color_4" value=""><label for="color_4">Green</label></li>
<li><input class="selectBox" type="checkbox" id="color_5" name="color_5" value=""><label for="color_5">Blue</label></li>
</ul>
</div>
The correct method is $.inArray - not inArray - you can shorten your code tho with a better selector and using a vanilla indexOf call:
$('input.selectBox').each(function(){
var isChecked = this.checked;
var txt = $(this).parent().text();
var idx = rulesArray.indexOf(txt);
if (isChecked && idx === -1) {
rulesArray.push(txt);
} else if (!isChecked && idx > -1) {
rulesArray.splice(idx, 1);
}
});
And a solution using $.map
var rulesArray = $('input.selectBox:checked').map(function() {
return $(this).parent().text();
}).get();
I am trying to implement a check box which checks all the check boxes on the page. But when I changed the code slightly, it stopped working. I want to keep the changed code and still want the functionality to be working. Kindly help!
* Kindly ignore the missing tags if any. It is correct unless I made mistake in editing the question.
<script>
function toggle(source) {
checkboxes = document.getElementsByName('qchecked[]');
for(var i=0, n=checkboxes.length;i<n;i++){
checkboxes[i].checked = source.checked;
}
}
</script>
<html>
/* Code for the check box which when checked, checks all the checkbox. */
<input type='checkbox' class='css-checkbox' id='checkbox' onClick='toggle(this)'/>
<label for='checkbox' class='css-label lite-y-green'></label>
/* Code for the check boxes which should be checked when the check box with id=checkbox is checked.
I changed the code from INITIAL CODE to CHANGED CODE for some other purpose and the toggle stopped working.
Now clicking on that one check box is not marking or un marking all the check boxes. */
<!-- INITIAL CODE -->
<input type='checkbox' id='yes_checkbox[$index]' class='css-checkbox' name='qchecked[]'/>
<label for='yes_checkbox[$index]' class='css-label lite-y-green'></label>
<!-- CHANGED CODE -->
<input type='checkbox' id='yes_checkbox[$index]' class='css-checkbox' name='qchecked[$array6[qID]]'/>
<label for='yes_checkbox[$index]' class='css-label lite-y-green'></label>
</html>
Instead of name, give a class to all elements and you should use by
getElementsByClassName('your_class');
Since you name of inputs are different, you can make use of common class
checkboxes = document.getElementsByClassName('css-checkbox');
Try this..
<ul class="chk-container">
<li><input type="checkbox" id="selecctall"/> Selecct All</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>
<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>
</ul>
$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if(this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
demo:https://jsfiddle.net/go1gL743/