jQuery traverse down multiple layers deep to set checked value - javascript

How do I use jQuery to traverse to this element deep in my table?
#adminreview > thead > tr > th:nth-child(1) > div > div > div.checkbox-container > div:nth-child(1) > input
and set the input's checked property to false?
I'm using this nice filter/sort jQuery plug in (Excel-like Bootstrap Table Sorting And Filtering Plugin) on my table. On load, I'm trying to only have one of the options checked, Pending, and will run the jQuery to hide the Approved & Denied rows separately.
On load, all statuses are currently checked by default:
Goal is to only have Pending checked on load:
Here is my table html. I know this has to do with traversing the DOM and setting the checked value for Select All, Approved, & Denied to false, but I'm not having much luck.
I assume I'd have to edit div:nth-child(1) (2) & (3) and use .prop('checked', false); Just not sure how to go that deep using jquery.
HTML (I didn't include the entire table on purpose):
<table id="adminreview" class="fbody">
<thead>
<tr>
<th class="apply-filter no-search">Status
<div class="dropdown-filter-dropdown">
<div class="dropdown-filter-content" style="display: none;">
<div class="dropdown-filter-sort">
<span class="a-to-z" data-column="0" data-index="0">A to Z</span>
</div>
<div class="dropdown-filter-sort">
<span class="z-to-a" data-column="0" data-index="0">Z to A</span>
</div>
<div class="checkbox-container">
<div class="dropdown-filter-item">
<input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all"
data-column="0" data-index="0" /> Select All</div>
<div class="dropdown-filter-item">
<input type="checkbox" value="Approved" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
data-index="0" /> Approved</div>
<div class="dropdown-filter-item">
<input type="checkbox" value="Denied" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
data-index="0" /> Denied</div>
<div class="dropdown-filter-item">
<input type="checkbox" value="Pending" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
data-index="0" /> Pending</div>
</div>
</div>
</div></th>
<th class="apply-filter">Company
<div class="dropdown-filter-dropdown">
<div class="dropdown-filter-content" style="display: none;">
<div class="dropdown-filter-sort">
<span class="a-to-z" data-column="1" data-index="1">A to Z</span>
</div>
<div class="dropdown-filter-sort">
<span class="z-to-a" data-column="1" data-index="1">Z to A</span>
</div>
<div class="dropdown-filter-search">
<input type="text" class="dropdown-filter-menu-search form-control" data-column="1" data-index="1"
placeholder="Search" />
</div>
<div class="checkbox-container">
<div class="dropdown-filter-item">
<input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all"
data-column="1" data-index="1" /> Select All</div>
<div class="dropdown-filter-item">
<input type="checkbox" value="ACME Construction Company" checked="checked" class="dropdown-filter-menu-item item"
data-column="1" data-index="1" /> ACME Construction Company</div>
<div class="dropdown-filter-item">
<input type="checkbox" value="Joe's Concrete" checked="checked" class="dropdown-filter-menu-item item"
data-column="1" data-index="1" /> Joe's Concrete</div>
</div>
</div>
</div></th>
There are other columns with the same class that I don't want to touch:
Thanks in advance!

You've item class on every checkbox. So what you can is loop through all the nodes and set checked to false for all. And then. Set checked to true for the last one.
Like
$('.item').each(function() {
$( this ).prop('checked', false);
});
$('.item').last().prop('checked', true);

Related

How do I make a button-like filter?

I want to make a button-like filter in my web. Right now, I just put the radio-button filter inside the box, but I want to remove the radio button and just make the filter work when I just click the box.
The code looks like this right now:
<div class="question-header" data-bind="visible: jobQuestions().length > 0">
<div class="col-sm-3" id="filter-1">
<div class="panel-body">
<input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" />
New Questions
(<span data-bind="text: newJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-2">
<div class="panel-body"">
<input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" />
Ignored Questions
(<span data-bind="text: ignoredJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-3">
<div class="panel-body">
<input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" />
Answered Questions
(<span data-bind="text: answeredJobQuestionsCount"></span>)
</div>
</div>
<div class="col-sm-3" id="filter-4">
<div class="panel-body">
<input type="radio" value="all" data-bind="checked: jobQuestionsFilter" />
All Questions
(<span data-bind="text: allJobQuestionsCount"></span>)
</div>
</div>
</div>
What do i have to fix?
EDIT:
When I try to hover it, the bg-color of the entire box changes, but when I just click it only the part of it changes. I am assuming this is because the label size is not full. How can I fix this issue?
You can fix this by adding an id to each of the radio buttons and then wrapping the .panel-body in a label like this:
<label for="radio1">
<div class="panel-body">
<input type="radio" value="new" id="radio1" data-bind="checked: jobQuestionsFilter" class="" />
New Questions
(<span data-bind="text: newJobQuestionsCount"></span>)
</div>
</label>
Then in your css apply display: none to all the radio buttons you want to hide.
EDIT
I have created a codepen that will give you the desired results. The only thing you will need to do is arrange the buttons horizontally like the image you provided. I hope this gets you on the right track.
Play around with that for a while to familiarize yourself with how it works.
Give the input an id, use a label with the for attribute to connect the label to the input, hide the input, and use the :checked pseudo class and adjacent sibling selector to style the label when an input is selected by clicking on the label.
And since you want to only be able to select one input at a time, you need to give the elements a name attribute so they're all tied to providing a value for that name
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background: #09c;
}
label {
height: 100%; width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="question-header" data-bind="visible: jobQuestions().length > 0">
<div class="col-sm-3" id="filter-1">
<div class="panel-body">
<input type="radio" value="new" data-bind="checked: jobQuestionsFilter" class="" id="new" name="someName" /> <label for="new">New Questions (
<span data-bind="text: newJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-2">
<div class="panel-body">
<input type="radio" value="ignored" data-bind="checked: jobQuestionsFilter" id="ignored" name="someName"/><label for="ignored"> Ignored Questions (
<span data-bind="text: ignoredJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-3">
<div class="panel-body">
<input type="radio" value="answered" data-bind="checked: jobQuestionsFilter" id="answered" name="someName"/><label for="answered"> Answered Questions (
<span data-bind="text: answeredJobQuestionsCount"></span>)</label>
</div>
</div>
<div class="col-sm-3" id="filter-4">
<div class="panel-body">
<input type="radio" value="all" name="someName" data-bind="checked: jobQuestionsFilter" id="all"/> <label for="all">All Questions (
<span data-bind="text: allJobQuestionsCount"></span>)</label>
</div>
</div>
</div>

Select all checkboxes using Javascript or jQuery

I want to check/uncheck all check boxes of a particular row in a table if Select all Checkbox is selected for that particular row
Here is the html for a single row.
<tr>
<td class="left">
<label>Admin - Organization</label>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="selectallAO" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxViewAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxAddAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxEditAOrganization" runat="server" /></label>
</div>
</td>
<td>
<div class="checkbox">
<label><asp:CheckBox cssclass="checkboxAO" ID="chkbxDeleteAOrganization" runat="server" /></label>
</div>
</td>
</tr>
There are 5 other rows like this for other pages as well. So, I want to check/uncheck all checkbox's for a particular row for which Select All was checked/unchecked.
UPDATE
Updated the jQuery function to make the master checkbox override child checkbox states.
How does something like this sound? I wasn't sure which classes were your checkboxes so you'll have to tweak this a bit:
HTML:
<div class="spacer"><input type="checkbox" class="selectallAO"> Select All</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
<div class="spacer"><input type="checkbox" class="checkboxAO"> Regular</div>
CSS:
div.spacer {
display: block;
}
JS:
$('.selectallAO').click(function() {
this.checked ? $('.checkboxAO').prop('checked', true) : $('.checkboxAO').prop('checked', false);
});
jsFiddle
The .parents("form:first") selector ensures that it only applies to those elements that are in the same form as the inputs you want to change. If for some reason you want to change elements outside of the form then you will need to remove that.
$(function() {
$(".selectallAO").on("click", function() {
debugger;
if ($(this).prop("checked")) {
$(this).parents("form:first").children(".checkboxAO").prop("checked", true);
} else {
$(this).parents("form:first").children(".checkboxAO").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="test" value="1" class="selectallAO">Select All</input>
<input type="checkbox" name="test" value="1" class="checkboxAO">1</input>
<input type="checkbox" name="test" value="2" class="checkboxAO">2</input>
<input type="checkbox" name="test" value="3" class="checkboxAO">3</input>
<input type="checkbox" name="test" value="4" class="checkboxAO">4</input>
</form>

How to highlight main label for checkbox input using css or jQuery

Let's assume i have code like below;
<div>
<span>SELECT1</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
<span>SELECT2</span>
<div>
<input type="checkbox" value="option3" name="option3">
<span>option3</span>
</div>
<div>
<input type="checkbox" value="option4" name="option4">
<span>option4</span>
</div>
</div>
Is there a way to highlight related "SELECT1" or "SELECT2" if at least one of involved option has checked ? In my situation , it is ok to do so for labels options1,2 and option3,4 however, how for SELECT1 and SELECT2 using css or jquery/js ?
Thanks in advance,
You can do it quite easily:
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]').is(':checked')){
$('.title').css('color','red');
}
else{
$('.title').css('color','black');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="title">SELECT</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
</div>

Show/hide multiple Divs with checkbox without using ID's only class names

Hi I needed assistance with having the “show/hide div” below show and hide when you click on either of the checkboxes in a section. I am planning on having multiple sections and the number is unknown, so it will not be possible to use ID's. So I was looking for a generic way if a checkbox in one region is clicked the “show/hide” only shows up in that region. I know you can probably achieve this by writing individual code and assigning ID’s for each section, but is there a way to make it function like I am visioning to avoid having to constantly update of the code? Is it possible to just target the closest div or next to element to achieve this when the checkbox is checked/unchecked or call css classes?
Here is my HTML
<!--section 1 -->
section 1
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 2
<!--section 2 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 3
<!--section 3 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 4
<!--section 4 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
Once you fix the invalid html (you need to add a closing </div> for <div class="custom-input">), you could use
$(this).closest('.custom-input').prev('.ShowHideDiv') //where $(this) is the checkbox
Refer this fiddle for an example (based on the comments) that hides the <div> if none of the checkboxes are checked, and displays the <div> if one or both the checkboxes are checked
I would do it like this:
$('.checkbox').on('click', function(){
$(this).closest('.custom-input').prev('.showHideDiv').toggle();
});
Just make sure your markup is closed properly and all your showHideDiv classes are exactly the same (i.e. right now some start with lowercase and some start with uppercase)
updated
http://jsfiddle.net/EEj29/

Unknown element in JQUery click

I am having a Html generated using JQUery and its like
<p class="fieldChoices title" style="">
Choices:
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice1 cutsom_button deleteField"></p>
<div class="seperator"/>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice2 cutsom_button deleteField"></p>
<div class="seperator"/>
</p>
I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..
Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,,
so i dont know how to resolve it using JQuery..please suggest me....
$(".deleteField").click(function(){
$(this).prevAll("input:first").remove();
$(this).prevAll(".seperator").remove();
$(this).remove();
});
Though it'd be easier if you put each choice in a div.
Try the following instead:
<p class="fieldChoices title" style="">
Choices:
<fieldset>
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
<fieldset>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
</p>
$("deleteField").bind("click", function(){
$(this).parent().remove();
}
html:
<fieldset class="fieldChoices title">
<legend>Choices</legend>
<ul>
<li>
<input id="Choice1" value="option1" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
<li>
<input id="Choice2" value="option2" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
</ul>
</fieldset>
jquery:
$(".fieldChoices li").each(function() {
var choice = $(this);
$(".deleteChoice", this).click(function() {
choice.remove();
});
});

Categories