Check the parent checkbox with jQuery - javascript

Basically I am trying to write a js func that if I check a child checkbox the parent checkbox also checks, if not already checked. I am using jquery here is my html:
<ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
<li style="margin: 0 0 5px 0;">
<input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1
<ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
<li>
<input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
</li>
</ul>
</li>
<li style="margin: 0 0 5px 0;">
<input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2
<ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
<li>
<input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
</li>
<li>
<input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
</li>
</ul>
</li>
</ul>
JS Func
function checkParent(child){
if (child != null) {
// if child is checked we need to check the parent category
if (child.checked) {
// get the parent checkbox and check it if not check....need help here....
$(child).parent().parent().parent()......
}
}
}

I'd remove the inline javascript in your HTML and use jQuery binding to bind the check event:
$(document).ready(function() {
$('input.liChild').change(function() {
if ($(this).is(':checked')) {
$(this).closest('ul').siblings('input:checkbox').attr('checked', true);
}
});
});
This will bind the event you're looking for to any input with the class liChild automatically without all those onclicks.

This will work, based on your structure:
$(child).parent().parent().prev().attr('checked', true);
or
$(child).closest('ul').prev().attr('checked', true);;

Related

How to show the order number in which the checkboxes are clicked?

I am trying to output the order number in which the checkboxes are checked. Whichever checkbox is checked first should show "a" beside it, whichever is checked second should show "b" beside it and so on.. Can anyone help?
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />
Billy
</label>
</li>
<li>
<label>
<input type="checkbox" />
Jacob
</label>
</li>
<li>
<label>
<input type="checkbox" />
Bob
</label>
</li>
<li>
<label>
<input type="checkbox" />
Alexandren
</label>
</li>
<li>
<label>
<input type="checkbox" />
Erren
</label>
</li>
<li>
<label>
<input type="checkbox" />
Stewgart
</label>
</li>
<li>
<label>
<input type="checkbox" />
Jillian
</label>
</li>
<li>
<label>
<input type="checkbox" />
Other
</label>
</li>
</ul>
You can add checked checkboxes at the end of an array, and remove them when get unchecked. By doing so, it will automatically adjust letters on checked boxes like so:
const cb = document.querySelectorAll('ul.checkboxes input[type="checkbox"]');
const order = [];
const onInput = e =>
{
const data = e.target;
const index = order.indexOf(data);
if (index != -1)
order.splice(index, 1);
if (e.target.checked)
order[order.length] = data;
for(let i = 0; i < cb.length; i++)
{
const index = order.indexOf(cb[i]);
cb[i].parentNode.setAttribute("num", String.fromCharCode(65 + index));
}
}
for(let i = 0; i < cb.length; i++)
cb[i].addEventListener("input", onInput);
.checkboxes label[num]:not([num = "#"]):before
{
content: attr(num);
}
.checkboxes label:before
{
content: "";
width: 1em;
display: inline-block;
}
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />Billy</label>
</li>
<li>
<label>
<input type="checkbox" />Jacob</label>
</li>
<li>
<label>
<input type="checkbox" />Bob</label>
</li>
<li>
<label>
<input type="checkbox" />Alexandren</label>
</li>
<li>
<label>
<input type="checkbox" />Erren</label>
</li>
<li>
<label>
<input type="checkbox" />Stewgart</label>
</li>
<li>
<label>
<input type="checkbox" />Jillian</label>
</li>
<li>
<label>
<input type="checkbox" />Other</label>
</li>
This keeps track of the order of items clicked in an array. When one is deselected, it splices the array and reorders the alphabet letters according to the order of the array
let alpha = 'abcdefghijklmnopqrstuvwxyz'.split('');
document.querySelectorAll('li').forEach(el => {
el.innerHTML += '<span class="letter"> </span>'
})
let checkedItems=[]
document.querySelectorAll('[type=checkbox]').forEach(el => {
el.value = el.closest('label').innerText.trim()
el.addEventListener('change', e => {
let n = el.closest('label').innerText.trim();
if (!e.target.checked) checkedItems.splice(checkedItems.indexOf(n),1)
else checkedItems.push(n);
document.querySelectorAll('.letter').forEach( l=> l.innerHTML = '')
checkedItems.forEach((n,i) => {
document.querySelector(`input[value=${n}]`).closest('li').querySelector('.letter').innerHTML = alpha[i]
})
});
});
.letter {
display: inline-block;
color: #333;
font-weight:bold;
padding: 2px 4px;
margin-left: 5px;
}
<ul class="dropdown-content checkboxes">
<li>
<label>
<input type="checkbox" />Billy</label>
</li>
<li>
<label>
<input type="checkbox" />Jacob</label>
</li>
<li>
<label>
<input type="checkbox" />Bob</label>
</li>
<li>
<label>
<input type="checkbox" />Alexandren</label>
</li>
<li>
<label>
<input type="checkbox" />Erren</label>
</li>
<li>
<label>
<input type="checkbox" />Stewgart</label>
</li>
<li>
<label>
<input type="checkbox" />Jillian</label>
</li>
<li>
<label>
<input type="checkbox" />Other</label>
</li>
You set the value for each checkbox.
<input type="checkbox" value="1" />
Whenever it will be checked, it can trigger an event and you can get the value.
$("#checkbox").change(function(){
var checked = $(this).is(":checked");
var value = $(this).val();
});

How to toggle selected or clicked element not all

Am trying to toggle only clicked element and adding some class to it but it's applying to all.
How can i do that?.any suggestion would be helpful.thank you
$("li").click(function(e){
$(".checkbox span").toggleClass("checked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
Wordz
<label class="checkbox">
<input type="checkbox" />
<span class="secondary"></span>
</label>
</li>
<li>
Phraser
<label class="checkbox">
<input type="checkbox" />
<span class="secondary"></span>
</label>
</li>
You can use $(this) to get current li clicked and depending on that add your class.
Demo Code:
$("li").click(function(e) {
//cuurent li->span->addclass
$(this).find('span').toggleClass("checked");
});
.checked {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> Wordz
<label class="checkbox">
<input type="checkbox" />
<span class="secondary">Something</span>
</label>
</li>
<li>
Phraser
<label class="checkbox">
<input type="checkbox" />
<span class="secondary">Something</span>
</label>
</li>
</ul>

select checkbox on input textbox by jquery

This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle
You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />

Get the value of label corresponding to the checked value of checkbox in a row

I have been having some issues with fetching the value of label for a corresponding checked value. Now i tried with closest attribute but it didnt work and as i dont have tr and cant use it as well. Issue is i am having the checkbox and its value inside a li tag. On click of button i call a function which needs to provide me with the checked values. So i am not sure how will i be able to fetch it. Below is my code and what i have tried.
function test() {
$('.chkName').each(function() {
if ($(this).is(':checked')) {
//How do i fetch the coorresponding val?
}
});
}
<li class="listRow" style=" max-width:314px; min-width:314px;">
<label>
<input id="id1" type="checkbox" name="" checked="checked" class="chkName">
<label>test</label>
</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<label>
<input id="id2" type="checkbox" name="" checked="checked" class="chkName">
<label>test1</label>
</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<label>
<input id="id3" type="checkbox" name="" class="chkName">
<label>test2</label>
</label>
</li>
Before we get to your question there's several issues which should be addressed. Firstly, your HTML is invalid as you have nested <label> elements. I'd suggets you remove the outer one and give the inner a for attribute to relate it to the sibling checkbox. Also, you shouldn't use inline style (or JS). The .listRow elements already have classes, so you can easily place the styles in a stylesheet.
As for the issue, you can use the :checked selector to find only the checked elements. Then, in the each() loop, you can use the this keyword to refer to the current element in the iteration. From there you can use next() to get the sibling label element. Try this:
function test() {
$('.chkName:checked').each(function() {
var $label = $(this).next('label');
console.log($label.text());
});
}
test();
.listRow {
width: 314px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="listRow">
<input id="id1" type="checkbox" name="" checked="checked" class="chkName">
<label for="id1">test</label>
</li>
<li class="listRow">
<input id="id2" type="checkbox" name="" checked="checked" class="chkName">
<label for="id2">test1</label>
</li>
<li class="listRow">
<input id="id3" type="checkbox" name="" class="chkName">
<label for="id3">test2</label>
</li>
</ul>
I would recommend to set a value on the checkbox itself.
<li class="listRow" style=" max-width:314px; min-width:314px;">
<input value="test" id="id1" type="checkbox" name="" checked="checked" class="chkName">
<label>test</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<input value="test1" id="id2" type="checkbox" name="" checked="checked" class="chkName">
<label>test1</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<input value="test2" id="id3" type="checkbox" name="" class="chkName">
<label>test2</label>
</li>
JS:
function test()
{
$('.chkName').each(function()
{
if($(this).is(':checked'))
{
//How do i fetch the coorresponding val?
console.log($(this).val())
}
});
}
Otherwise, if you really want the value of the label, use "next":
function test()
{
$('.chkName').each(function()
{
if($(this).is(':checked'))
{
//How do i fetch the coorresponding val?
console.log($(this).next().text())
}
});
}

disable button when class on li doesnt exist

I want to prevent the button to be click when there are no item selected in the list. Only enable it when at least 1 in the list have highlight class.
HTML
<ul class="list">
<li><input type="checkbox" name="cat[]" id="1" value="227">
<label class="label-list" for="1">Select</label></li>
<li><input type="checkbox" name="cat[]" id="2" value="227">
<label class="label-list" for="2">Select</label></li>
<li><input type="checkbox" name="cat[]" id="3" value="227">
<label class="label-list" for="3">Select</label></li>
<li><input type="checkbox" name="cat[]" id="4" value="227">
<label class="label-list" for="4">Select</label></li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
SCRIPT:
$(".list .label-list").click(function() {
$(this).toggleClass("highlight");
});
CSS:
.highlight {background:red;}
FIDDLE
Tried to use this script but how do I toggle the attr from disabled to enabled?
if( $('.list .label-list').hasClass('highlight') === true )
{
$('#search').addClass('active');
}
You should rather test for is :checked like
var $checkb = $(".list").find("input[type='checkbox']"),
$search = $("#search");
$checkb.on("change", function(){
$search.prop("disabled", !$checkb.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
<label>
<input type="checkbox" name="cat[]" value="224">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="225">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="226">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="227">
Select
</label>
</li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
you can simple count all selected checkbox with this jquery selector
$('input[type=checkbox]:checked').length
this returns the total count of the checkbox selected
just add this event listener which occurs every time a checkbox value is change
$(document).on('change', 'input[type=checkbox]', function() {
var disabled = $('input[type=checkbox]:checked').length ? false: true;
$("#search").attr('disabled', disabled);
})
DEMO

Categories