Check Common Dropdown Items (JavaScript, jQuery) - javascript

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);

Related

Rename text (change space per point) in input with javascript

look this: i chargue this file.. and it shows like this
and i need to rename it like that:
I would like to automatically rename spaces by periods, and delete other characters like [,()!;'\[\]}{=]
I honestly do not have a script, because I do not know how to do it, I had one but it was a disaster haha; I broke all the html :/
I just need to modify the text in input. script in javascript or jquery
I clarify that the texts are always different
I leave you a jsfiddle https://jsfiddle.net/qwertyip/j4dcsL7n/12/
I hope you can help me, regards
I am unsure when you want to modify the value, but this will update the value for you:
// Get a reference to the element in question
let renameThese = Array.from(document.querySelectorAll("input[name^='rename']"));
// Loop through all the elements to be renamed
renameThese.map(el =>
// Replace the spaces with periods and remove all the other characters.
el.value = el.value.replace(/\ /g, '.').replace(/[\[\]\{\}\(\)\;\!\;\'\=]/g, ''));
<table id="list-files" class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th width="35">
<div class="checkbox-custom checkbox-default">
<input type="checkbox" id="select-all-files" checked="">
<label for="select-all-files"></label>
</div>
</th>
<th>File</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox-custom checkbox-default"><input name="files[]" checked="" type="checkbox" value="2"><label></label></div>
</td>
<td class="pt-none pb-none">
<div>
<div class="pull-left mt-xs mr-xs">PDF Shaper Professional v8.9 (2-click run) / </div>
<div style="overflow:hidden"><input class="form-control input-sm m-none" style="background-color: transparent" type="text" name="rename[2]" value="PDF S[]{}haper Professional v8.9 (2-click run).exe"></div>
</div>
</td>
<td>17.2 MiB</td>
</tr>
<tr>
<td>
<div class="checkbox-custom checkbox-default"><input name="files[]" checked="" type="checkbox" value="2"><label></label></div>
</td>
<td class="pt-none pb-none">
<div>
<div class="pull-left mt-xs mr-xs">PDF Shaper Professional v8.9 (2-click run) / </div>
<div style="overflow:hidden"><input class="form-control input-sm m-none" style="background-color: transparent" type="text" name="rename[2]" value="PDF S[]{}haper Professional v8.9 (2-click run).exe"></div>
</div>
</td>
<td>17.2 MiB</td>
</tr>
</tbody>
</table>
Note: If you leave a comment when you would like to update the value, leave a comment and will update, else, here you go.

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

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.

How can I delete selected <tr>(parent) div every time a button (child) is clicked in jQuery?

HTML:
<tr>
<td>
<div class="input">
<p>Room 1: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room1rev" size="1" placeholder="0">
</div>
</td>
<td>
<button id="btn-del-rev" class="btn-del">-</button>
</td>
</tr>
<tr>
<td>
<div class="input">
<p>Room 2: </p>
</div>
</td>
<td >
<div class="revenue-input">
<input type="number" min="0" id="room2rev" size="1" placeholder="0">
</div>
</td>
<td>
<button id="btn-del-rev" class="btn-del">-</button>
</td>
</tr>
jQuery:
<!-- Delete Element -->
<script>
$(document).ready(function() {
$("#btn-del-rev").click(function() {
$(this).parent().parent().remove()
});
});
</script>
When the button with the #btn-del-rev id is clicked it removes the entire tr structure (parent, etc.) However, clicking the same button on the next row doesn't remove the next tr.
I understand that it's a problem with reusing an id, but I'm having a hard time figuring out how to have the button work across all tr that I want deleted without creating a unique id, and redundant jQuery code.
Any help is appreciated!
An ID must be unique !
Change or remove the ID attribute in your HTML
<button class="btn-del">-</button>
And use the .class attribute instead
$(".btn-del").click(function() {
By the way, instead of .parent().parent(), you should use .closest()
$(this).closest('tr').remove()
get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
jQuery Closest documentation
ID's can't be repeated in a page, they are unique by definition.
You need to change that to a class instead
You're using IDs and for multiple buttons you should use CLASS names. So you better transform that btn-del-rev to a class.
The IDs must be unique, so you may change them to class.
In order to remove only the parent div you need to change this line:
$(this).parent().parent().remove()
to:
$(this).closest('tr').find('div.revenue-input').remove()
The .closest('tr') selects the parent row, while the find selects the div.
The snippet:
$(document).ready(function () {
$(".btn-del-rev").click(function () {
$(this).closest('tr').find('div.revenue-input').remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<div class="input">
<p>Room 1: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room1rev" size="1" placeholder="0">
</div>
</td>
<td>
<button class="btn-del-rev btn-del">-</button>
</td>
</tr>
<tr>
<td>
<div class="input">
<p>Room 2: </p>
</div>
</td>
<td>
<div class="revenue-input">
<input type="number" min="0" id="room2rev" size="1" placeholder="0">
</div>
</td>
<td>
<button class="btn-del-rev btn-del">-</button>
</td>
</tr>
</tbody>
</table>
Make the id a class
<button class="btn-del-rev btn-del">-</button>
Use the class, then get closest row
$(document).ready(function() {
$(".btn-del-rev").on('click',function() {
$(this).closest("tr").remove();
});
});

Adding ng-model to Select multiple causes Options not to display in IE

This is so strange...I have a multiple select list. If I add ng-model to the select. the option values display as below:
If I remove ng-model, the CompanyName shows correctly.
Here is my HTML:
<tab heading="Contractors">
<div class="panel panel-default">
<div class="panel-body">
<table style="width:100%">
<tr>
<td>
#Html.Label("Enter Name, FID, or SSQID")<br />
<input type="text" style="width:200px"/>
</td>
<td rowspan="2">
<select multiple ng-multiple="true" ng-model="selectedContractors">
<option ng-repeat="c in contractors" value="{{c.CompanyID}}">{{c.CompanyName}}</option>
</select>
</td>
<td rowspan="2" style="align-content:center" ng-show="viewContractors">
<i class="fa fa-chevron-circle-right" style="cursor:pointer" ng-click="addContractor()"></i><br /><br />
<i class="fa fa-chevron-circle-left" style="cursor:pointer"></i>
</td>
<td></td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" ng-click="submitSearch(search)">Search</button>
</td>
<td></td>
<td style="align-content:center"></td>
</tr>
</table>
</div>
</div>
</tab>
</tabset>
Here is my controller code:
$scope.submitSearch = function (cs) {
var id = $scope.businessUnitID;
operatorService.getsearch(cs, id)
.success(function (data) {
$scope.contractors = data.SearchResults;
$scope.viewContractors = true;
});
};
What is most perplexing is that I use the select multiple list EXACTLY the same way in another project but in that project the option values show correctly with ng-model. I just can't make sense of this.
Since first posting this question, I have discovered that the issue seems to be caused by placing select on Angular ui-tabs, but it still only happens in IE. If I move the select from the tab and just place it somewhere on the page, it works as aspected, but hence, I need it on the tabs.
Any assistance is greatly appreciated!

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