check all checkbox (using CSS3 ::before and ::after) programmatically - javascript

I'm using a CSS template and trying to draw a table having the following structure:
<tbody>
<tr role="row" class="odd">
<td>
<div class="checkbox">
<input type="checkbox" id="checkbox1" value="check">
<label for="checkbox1"></label>
</div>
</td>
<td><a id="link" href="detail.jsp">2018-06-14 17:41</a></td>
</tr>
<tr class="unread even" role="row">
<td>
<div class="checkbox">
<input type="checkbox" id="checkbox0" value="check">
<label for="checkbox0"></label>
</div></td>
<td><a id="link" href="detail.jsp">2018-06-14 07:57</a></td>
</tr>
</tbody>
the input type checkbox are using a CSS ::before and ::after with the following settings:
[type=checkbox]:checked,[type=checkbox]:not(:checked){...
[type=checkbox]+label:before,[type=checkbox]:not(.filled-in)+label:after{...
[type=checkbox]:not(.filled-in)+label:after{...
[type=checkbox]:not(:checked):disabled+label:before{...
[type=checkbox].tabbed:focus+label:after{...
[type=checkbox]:checked+label:before{...
[type=checkbox]:checked:disabled+label:before{...
I would like to select all checkbox programmatically in Javascript, any idea how I can do it ?

I would like to select all checkbox programmatically in Javascript
If you want to make all checkboxes 'checked' ,for that you can use :
let cbox = document.querySelectorAll("input[type='checkbox']");
for (var i=0; i<cbox.length; i++) {
cbox[i].checked = true;
}
<input type="checkbox" class="c1">
<input type="checkbox" class="c2">
<input type="checkbox" class="c3">
But, if you want to select the :before or :after elements with javascript, you CAN't. They are pseudo-elements and like their name says, they are not actual elements, they are not considered parts of the DOM so they cannot be 'touched', 'selected', 'manipulated' etc. by javascript or jquery etc.

Related

Check Common Dropdown Items (JavaScript, jQuery)

I need some help with the following code.
So I have a page like the following one in the example.
So far, I tried the following method. (Please check my code and live example)
With my current method to select the checkboxes, I have to write code for each and every option like this.
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
Is there any simpler way to do this? for an example can we just select every one which contains us_, as_, eu part without assigning unique values to every option. Any assistance you can provide would be greatly appreciated.
$("button.select-all").on("click", selectAll);
function selectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !0)
})
}
$("button.unselect-all").on("click", unselectAll);
function unselectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !1)
})
}
$("button.select-us").on("click", selectAmerica);
function selectAmerica() {
unselectAll();
$(".schoolareas").toArray();
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
}
$("button.select-eu").on("click", selectEurope);
function selectEurope() {
unselectAll();
$(".schoolareas").toArray();
$("#check_eu, #check_eu-1").prop("checked", !0)
}
$("button.select-as").on("click", selectAsia);
function selectAsia() {
unselectAll();
$(".schoolareas").toArray();
$("#check_as, #check_as-1").prop("checked", !0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid py-4">
<div class="row text-center">
<div class="col-8 offset-2">
<div class="btn-groups">
<button class="btn btn-primary select-all">Select All</button>
<button class="btn btn-primary unselect-all">Unselect All</button>
<button class="btn btn-primary" id="latencybutton">Count</button>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Country/Area</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item select-us" type="button">America</button>
<button class="dropdown-item select-eu" type="button">Europe</button>
<button class="dropdown-item select-as" type="button">Asia</button>
</div>
</div>
</div>
</div>
</div>
<div class="container col-8 offset-2">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded text-xs-center">
<table id="grid" class="table table-hover">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string">Locations:</th>
<th data-type="number">Scores:</th>
<th data-type="number">Average:</th>
<th class="thmw" data-type="string">Score Status:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="check_eu" checked />
<label for="check_eu"></label>
</td>
<td>London (EU)</td>
<td class="schoolareas" id="eu"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_eu-1" checked />
<label for="check_eu-1"></label>
</td>
<td>Manchester (EU)</td>
<td class="schoolareas" id="eu-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us" checked />
<label for="check_us"></label>
</td>
<td>New York (US)</td>
<td class="schoolareas" id="us"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-1" checked />
<label for="check_us-1"></label>
</td>
<td>California (US)</td>
<td class="schoolareas" id="us-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-2" checked />
<label for="check_us-2"></label>
</td>
<td>Florida (US)</td>
<td class="schoolareas" id="us-2"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as" checked />
<label for="check_as"></label>
</td>
<td>Singapore (AS)</td>
<td class="schoolareas" id="as"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as-1" checked />
<label for="check_as-1"></label>
</td>
<td>China (AS)</td>
<td class="schoolareas" id="as-1"></td>
<td class="status"></td>
</tr>
</tbody>
</table>
</div>
</div>
Sure you can! Instead of accessing elements by their IDs (which have to be unique), give them all a common class and grab them by that instead.
So elements that look like this:
<input type="checkbox" id="check_us-1" checked />
<input type="checkbox" id="check_us-2" checked />
Get an additional class prop, like this:
<input type="checkbox" id="check_us-1" class="us" checked />
<input type="checkbox" id="check_us-2" class="us" checked />
Then you can update their props in batch like this:
$(".us").prop("checked", !0)
Without modifying your current HTML you can select all elements wich class contains a string with:
$('checkbox[class^="us"]')
and changed their checkbox value like this:
$('checkbox[class^="us"]').prop("checked", !0)
then change us for whatever word you want.
There are several ways you can do this using either JavaScript or jQuery.
You could use the attribute contains selector to find all elements with an id that matches a pattern:
$('[id*="us_"]').prop('checked', true);
This form of selector also works with JavaScript's native document.querySelector() method.
However, this runs the risk of unintentionally selecting irrelevant elements that happen to match the selector. The selector above would also match an element with an id of "status_code", for example.
A better approach is the one that #jonny suggests in his answer. While the id attribute of every element in a document has to be unique, other attributes like "class" do not. This allows you to assign a css class name to a group of related elements and select them by that class name using the class selector. (Again, this selector also works with the document.querySelector method).
Personally, I dislike using css class names to select related groups of elements because css classes are for styling, not for functionality. So another approach you can use if you want to keep style an function separate is to include data attributes like so:
<input type="checkbox" id="check_us-1" checked data-group="us" />
<input type="checkbox" id="check_us-2" checked data-group="us" />
You can then use the attribute selector to select both inputs:
$('[data-group="us"]').prop('checked', true);

Reading values from a dynamic table form

OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)
Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></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>

Inserting a row break in dynamically generated table

I have table rendered by Apex code in salesfoce.
<div id="wrap" style=""><fieldset style="border: none;"><table role="presentation" style="">
<tbody><tr>
<td>
<input type="radio"value="Casual"><label for="j_id0:j_id2:j_id4:j_id112:0"> CASUAL</label></td>
<td>
<input type="radio" value="BUSINESS CASUAL"><label for="j_id0:j_id2:j_id4:j_id112:1"> BUSINESS CASUAL</label></td>
<td>
<input type="radio" value="Semi-Formal"><label for="j_id0:j_id2:j_id4:j_id112:2"> SEMI-FORMAL</label></td>
<td>
<input type="radio" value="Formal"><label for="j_id0:j_id2:j_id4:j_id112:3"> FORMAL</label></td>
<td>
<input type="radio" value="Costume"><label for="j_id0:j_id2:j_id4:j_id112:4"> COSTUME</label></td>
<td>
<input type="radio" value="Other"><label for="j_id0:j_id2:j_id4:j_id112:5"> OTHER</label></td>
</tr>
</tbody></table></fieldset>
</div>
I need to break the row after third label . which means three inputs/labels in one row.
I can use jQuery. I have tried everything like injecting closing </tr> tag after third input via innerHTML etc . But nothing seems to work .
Try to manipulate the DOM a little bit,
$('<tr>').append($('tr td:gt(2)')).appendTo('tbody');
DEMO

Jquery .siblings() not working with custom attributes

i am trying to add class to all the siblings that are sharing some custom attribute over a check box element, Provided the condition checkbox is checked or not checked.
if (jQuery("tr[data-tt-parent-id='" + parentIdLevel_1 + "']").find(' td:first input').siblings().is(':checked') == true) {
jQuery('tr#' + parentIdLevel_1 + ' td:first').removeClass('intermediateCheckBoxCss').addClass('chkBoxCss');
}
EDIT: This is my HTML
<tbody><tr class="noParentoddRow branch expanded" data-tt-id="6" id="6">
<td class="intermediateCheckBoxCss"><span class="indenter" style="padding-left: 0px;"> </span>
<input type="checkbox" class="" style="display: none;" value="6" name="status[]" id="status-6">
<label for="status-6">
<span></span>
Manufacturing Module</label>
</td>
</tr>
<tr data-tt-parent-id="6" data-tt-id="7" id="7" class="branch collapsed" style="display: table-row;">
<td class="chkBoxCssChecked"><span class="indenter" style="padding-left: 23px;"> </span>
<input type="checkbox" class="cssParentId-6" style="display: none;" value="7" name="status[]" id="status-7" checked="checked">
<label for="status-7">
<span></span>
Stock</label>
</td>
</tr>
<tr data-tt-parent-id="6" data-tt-id="12" id="12" class="branch collapsed" style="display: table-row;">
<td class="chkBoxCssChecked"><span class="indenter" style="padding-left: 23px;"> </span>
<input type="checkbox" class="cssParentId-6" style="display: none;" value="12" name="status[]" id="status-12" checked="checked">
<label for="status-12">
<span></span>
Product</label>
</td>
</tr>
some how its not working if i am missing some thing plz let me know, and if some thing else is required do mention it i will provide it
jQuery's siblings() selects all siblings. You'll need to use each() in order to use is(':checked'), because each element needs to be tested.
jQuery('input').eq(0).siblings().each(function() {
if (this.checked) {jQuery(this).addClass('selected');}
});
However, you can also select specific siblings like so:
...siblings(':checked').addClass('selected');
OR
jQuery('input ~ :checked').addClass('selected')
http://jsfiddle.net/GzUpW/
EDIT:
Regarding the definition of siblings:
Siblings are defined as nodes at the same level and with the same parent.
So, given your example, it seems that the selector should be something like this (relative to a specific input):
$(this).closest('table').find('input').not(this)
Here's an example that makes checkboxes function like radio buttons:
http://jsfiddle.net/dYT7K/

Categories