Display icon when at least one checkbox is checked - javascript

I display checkboxes in my table. Now when i check at least one checkbox, the icon must appear if not, it should be hidden. My icon is not hidden.
What am i doing wrong?
This is my code
<div class="row">
<div class="col-sm-12 ">
<a data-toggle="modal" id="btnAdd" data-target="#myModal" class="btn"> Add Items </a>
<i type="icon" class="fa fa-trash " ></i>
<div>
</div>
<table class="table" id="table">
<thead>
<tr>
<th><input type="checkbox" id="master"></th>
</tr>
</thead>
<tbody>
<td><input type="checkbox"></td>
//table data here
</tr>
#endforeach
</tbody>
</table>
var checkboxes = $("input[type='checkbox']"),
hideIcon = $("i[type='icon']");
checkboxes.click(function() {
hideIcon.attr("disabled", !checkboxes.is(":checked"));
});

You'll need to iterate through all your checkboxes on each click. Also, I would recommend using the prop function to check for the "checked" status. Then, to hide it, either use the hide function, or set the display property to hidden:
$("input[type='checkbox']").click(function() {
var atLeastOneChecked = false;
$("input[type='checkbox']").each(function(index) {
if ($(this).prop('checked'))
atLeastOneChecked = true;
});
if (atLeastOneChecked) {
$("i[type='icon']").show(); //built-in jquery function
//...or...
$("i[type='icon']").css('display','inline-block'); //or set style explicitly
} else {
$("i[type='icon']").hide(); //built-in jquery function
//...or...
$("i[type='icon']").css('display','none'); //set style explicitly
}
});

Related

Dynamically created elements having the different values but the same index

My code is to create search suggestions after triggering the 'keyup' event, hence creating dynamic elements with a class "suggestion-box". On clicking any of "suggestion-box" classes, new dynamic elements, each with parent class "transaction-entry", are created. Each of the dynamically created "transaction-entry" classes has child class 'quantityInput' which is an input element. The major problem is this, each of the 'quantityInput' classes display their corresponding input values when delegated to a static element through the 'keyup' event trigger but not their corresponding indexes (displays only 0).
HTML CODE
<div class="col-sm-1">
<button type="button" id="delete-transact" class="btn btn-default" data-toggle="tooltip" title="Delete All Entries" data-placement="right">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<!-- Input field for search suggestion -->
<form method="POST" action="{{URL::to('/search/transaction')}}" id="transAction">
{{ csrf_field() }}
<div class="col-sm-12">
<div class="form-group">
<input type="text" name="searchItem" id="transProductSearch" class="form-control" value="" title=""
placeholder="Search product">
<!--Container for dynamically created class "suggestion-box"-->
<div id="suggestion-container"></div>
</div>
</div>
</form>
<div class="cover">
<div class="table-responsive">
<form action="" method="">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity purchased</th>
<th>Quantity Available</th>
<th>Price</th>
</tr>
</thead>
<!--Container for dynamically created class "transaction entry"-->
<tbody id="transaction-body">
</tbody>
<tfoot>
<tr class="tfoot">
<td>Total</td>
<td class="transactionTotal"></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
JQUERY CODE
$('#transProductSearch').on('keyup',function (e) { //Event listener for ajax request
e.preventDefault();
if($(this).val() !== ""){
$.ajax({
type: "POST",
url: $('#transAction').attr('action'),
data: $('#transAction').serialize(),
success: function (response) {
$(".suggestion-box").remove();//Removing every dynamically created "suggestion-box" class on every successful AJAX request;
pEntities = [];
response = jQuery.parseJSON(response);
$.each(response, function (indexInArray, value) {
$("#suggestion-container").append($('<div>',{class:"suggestion-box", text:value.productName}));
pEntities[indexInArray] = {prodQuantity:"",prodId:"",prodPrice:"",prodName:""};
pEntities[indexInArray].prodQuantity = value.quantity;
pEntities[indexInArray].prodId = value.id;
pEntities[indexInArray].prodPrice = value.price;
pEntities[indexInArray].prodName = value.productName;
});
},
error: function () {
console.log($('#transAction').val());
}
});
}
else{
$('.suggestion-box').remove()//Removing every suggestion box if input field is empty
}
});
$('#suggestion-container').on("click",'.suggestion-box', function (e) { // Event delegation to append new "transaction-entry" class
var index = $(this).index();
$('#transaction-body').append('<tr class="transaction-entry"><input hidden class="prodId" value="'+pEntities[index].id+'"/><td>'+pEntities[index].prodName+'</td><td><input class="quantityInput" style="color:black" type="number"></td><td>'+pEntities[index].prodQuantity +'</td><td class="productPrice">'+pEntities[index].prodPrice +'</td></tr>');
$('.suggestion-box').remove();
})
$('#delete-transact').click(function (e) {//Event listener to remove all transaction entry classes
e.preventDefault();
$('#transaction-body').empty();
})
$('#transaction-body').on("keyup",'.quantityInput',function (e) {//Event Delegation to output quantityInput value and index
console.log($(this).val()+" "+$(this).index());
});

radio button in a table checked and unchecked

I have a radio button in table and I want to implement select all functionality for radio button based on name. This is my code:
var checked = false;
$scope.acceptOrRejectAllOrders = function(selectedVal) {
if (selectedVal == 'Accept all') {
jQuery("#bundleAcceptAll").attr('checked', 'checked');
// $("#bundleAcceptAll").prop("checked", true);
//$("#bundleAcceptAll").attr('checked', 'checked');
var aa = document.getElementsByName("bundleAcceptAll");
for (var i = 0; i < aa.length; i++) {
document.getElementsByName(bundleAcceptAll).checked = true;
}
//$scope.quoteRequest.quotationRequestItems[0].quotes.length
} else {
}
};
<div style="border:1px #f5f4f4 solid;background: #f9f9f9;" ng-repeat="(key,quoteAndOrder) in getQuotesAndOrders()">
<div style="background: #fff;">
<table border="0" style="width: 100%;" class="table table-striped">
<thead>
<tr style="background: #ff7900;color: #fff;">
<th>Quote ID</th>
<th>{{key}}</th>
</tr>
<tr>
<th>Accept or Reject Orders:</th>
<th>
<span style="float: left;background: #f9f9f9;">
<input type="radio" name ="bundleAcceptAll" ng-change="" class="radioSignatory" value="Approve Order" ng-disabled="">
<p class="labelRadioSignatory">Approve Order</p>
<input type="radio" name ="bundleRejectAll" ng-change="" class="radioSignatory" value="Reject Order" ng-disabled="">
<p class="labelRadioSignatory">Reject Order</p>
</span>
</th>
</tr>
</thead>
<tr ng-repeat="odr in quoteAndOrder">
<td> {{odr.id}} </td>
<td>{{odr.status}}</td>
</tr>
</table>
<hr>
</div>
</div>
I am not able to select all radio buttons with name bundleAcceptAll. It is basically a list in which each row will have a radio button. I want all radio buttons in the list to be selected. Only one button gets selected
AFAIK if you choose radio button and use the same name it will treated as group that will only one item selected. Perhaps you could just change it into checkbox.
function oncheckClick()
{
$('input[name=chkBox]').prop('checked',true)
}
function onUnCheckClick()
{
$('input[name=chkBox]').prop('checked',false)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="chkBox">
<button id="check" onclick="oncheckClick()" value="Check">Check</button>
<button id="check" onclick="onUnCheckClick()" value="UnCheck">UnCheck</button>
if it is list, you can loop through the list and check or uncheck
$("input[type=radio][name='" + name + "']").each(function() {
//code here
});
As was mentioned above, it's not radio button functionality to have multiple items checked, it's checkboxes. But you can style checkboxes so they would look like radiobuttons. See for example: How to make a checkbox in circle shape with custom css?

Make contenteditable for a specific table span using JS onclick

I have a simple table where I'm trying to allow for the field value to be made contenteditable after pressing the edit button that I am printing next to each value:
<table>
<tr>
<th>Variable A</th>
<th>Variable B</th>
<th>Variable C</th>
<tr>
<td><span id="field">Value A</span> <button type="button" class="result">EDIT</button></td>
<td><span id="field">Value B</span> <button type="button" class="result">EDIT</button></td>
<td><span id="field">Value C</span> <button type="button" class="result">EDIT</button></td> </tr>
</table>
I use the following jQuery upon clicking the Edit button
$( document ).ready(function() {
$("body").on('click', '.result', function() {
var update = $(this).closest('td');
document.getElementById('field').contentEditable = true;
update.append('<button class=\"result\">Save</button></td>');
$(this).remove();
});
});
Unfortunately when I click "Edit" button, only the first field (Value A) becomes editable.. I think this is because
document.getElementById('field').contentEditable = true;
Is only updating the first instance of the id='field'
But I'm trying to make it only update the field next to where I pressed the button. So if I click the 3rd Edit button, it should make the Value C field be editable. Instead it only does Value A.
I realize that I need to make it specific to that span.. But not finding a solution. I tried:
$(this).closest('.field').contentEditable = true;
But if I do this then no spans become editable. I know this might be an easy question but I've tried all sorts of options to no avail.
You can use .prev() to select the span previous to button, and the id's should always be unique, so I changed the id field to field_1, field_2, field_3, and I've replaced the update.contentEditable = true; with update[0].contentEditable = true;:
$("body").on('click', '.result', function() {
var update = $(this).prev('span');
var td = $(this).closest('td');
update[0].contentEditable = true;
td.append('<button class=\"result\">Save</button></td>');
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Variable A</th>
<th>Variable B</th>
<th>Variable C</th>
<tr>
<td><span id="field_1">Value A</span>
<button type="button" class="result">EDIT</button>
</td>
<td><span id="field_2">Value B</span>
<button type="button" class="result">EDIT</button>
</td>
<td><span id="field_3">Value C</span>
<button type="button" class="result">EDIT</button>
</td>
</tr>
</table>

How to update / refresh div tag in ajax in MVC 3

I have checkboxes (initially none selected) in a loop and want to show additional icon next to the checkbox but ONLY when the checkbox is selected. I have included "if" statement but when the user selects a checkbox the icon does not appear. How can I do this
<div id="divItems">
<table> <thead></thead><tbody>
#foreach (Employee item in Model)
{
<tr>
<td> <label class="checkbox">
<input type="checkbox" name="#(item.Name)" id="#(item.Name)" class="clink" value="(item.FullName)" /> #item.Name </label>
</td>
<td>
<a href="#MModal" class="open-Modal" data-id="(item.MapSPNames)"
data-toggle="modal">
<i class="icon-edit" title="Filter"></i>
</a>
</td>
</tr>
}
</tbody></table>
</div>
Edit
Make a function and call it wherever you want:
function showChecked() {
$(".open-Modal").each(function () {
$(this).hide();
});
$(".clink").each(function () {
if ($(this).is(":checked"))
$(this).parent().next().find(".open-Modal").show();
else
$(this).parent().next().find(".open-Modal").hide();
});
}
Now call the function showChecked(), according to your need. Like on change of the checkbox:
$(".clink").on("change", function () {
showChecked();
});
Also call this function on $(document).ready or where you are loading the html of your div id="divItems"

Combines table filters in jquery

I have a table with different places, and implemented some simple buttons that allow you to filter the list. First filter is location (north, east, central, south, west) which is based on postcode. Another filter is on "impress". This shows you only the places that have have 4 or higher value in the column. Filters work great separately, but not together. The result that I am after is when I press "West" is shows me the places in "West, when I then click impress, I expect to see the places in west with a 4 or 5 score for impress.
JSFiddle here
$('.table td.postcode').each(function() {
var cellText = $(this).html();
var locationString = cellText.substring(0,2);
if (locationString.indexOf('W') > -1){
$(this).parent().addClass('west');
}
if (locationString.indexOf('C') > -1){
$(this).parent().addClass('central');
}
if (locationString.indexOf('E') > -1){
$(this).parent().addClass('east');
}
if (locationString.indexOf('S') > -1){
$(this).parent().addClass('south');
}
if (locationString.indexOf('N') > -1){
$(this).parent().addClass('north');
}
});
$("input[name='filterStatus'], select.filter").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
if (classes == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr").filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
});
$("input[name='impressStatus']").change(function(){
var classes = [];
$("input[name='impressStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
if(classes == ""){
$("#StatusTable tbody tr").show();
}
else{
$(".table td.impress").each(function(){
if($(this).data("impress") >= 4){
$(this).parent().show();
}
else{
$(this).parent().hide();
}
});
}
});
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--BUTTON FILTERS -->
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" style="" data-toggle="buttons">
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="north" autocomplete="off">North
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="east" autocomplete="off" class="radio">East
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="central" autocomplete="off" class="radio">Central
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="south"autocomplete="off" class="radio">South </label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="west" autocomplete="off" class="radio">West
</label>
</div><!-- button group -->
<label class="btn btn-primary outline">
<input type="checkbox" name="impressStatus" class="radio" aria-pressed="true" autocomplete="off">Impress her
</label>
</div><!-- btn toolbar-->
<!--TABLE -->
<table class="table" id="StatusTable">
<thead>
<tr>
<th data-sort="string" style="cursor:pointer">name</th>
<!-- <th>Description</th> -->
<th data-sort="string" style="cursor:pointer;">postcode</th>
<th data-sort="int" style="cursor:pointer;">price</th>
<th data-sort="int" style="cursor:pointer;">total</th>
<th data-sort="int" style="cursor:pointer;">impress</th>
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-link="/places/1">
<td>Name of place 1</td>
<td class="postcode">NW1</td>
<td class="price" data-price='3'>3</td>
<td class="rating" data-rating='69'>69</td>
<td class="impress" data-impress='4'>4</td>
</tr>
<tr data-link="/places/2">
<td>Name of place 2</td>
<td class="postcode">E3</td>
<td class="price" data-price='4'>4</span></td>
<td class="rating" data-rating='89'>89</td>
<td class="impress" data-impress='5'>5</td>
</tr>
<tr data-link="/places/3">
<td>Name of place 3</td>
<td class="postcode">SW3</td>
<td class="price" data-price='2'>2</td>
<td class="rating" data-rating='51'>51</td>
<td class="impress" data-impress='3'>3</td>
</tr>
</tbody>
</table>
Code is probably not the most efficient, but it works :). Once I got this working, I want to add more filters.
(sorry for my bad english)
if these are the only filters you need, you can use two different type of filter:
hide via Javascript
hide via Css
if you use 2 types of filters the filters can work correctly without use a complex javascript code to manage a big number of different cases and combination:
I add a initial (on document load) control that check if a tr has the value impress cell >4, if has it add a new class: is_impress else add an other: no_impress.
$('.table td.impress').each(function(){
var _class = ($(this).data("impress") >= 4) ? "is_impress" : "no_impress";
$(this).parent().addClass(_class);
});
The code of filter by position is the same... but... I edit the filter by impress to add a class to table () when is active and take it off when isn't:
$("input[name='impressStatus']").change(function(){
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_impress")
: $("#StatusTable").addClass("active_impress");
});
if the table has the class active_impress a css rules override the inline code of dispaly to hide all the row that haven't an impress >4:
#StatusTable.active_impress tr.no_impress{
display:none !important;
}
This type of filter override any other display modification until the checkbox stay checked.
I edit your fiddle:
https://jsfiddle.net/Frogmouth/gkba343L/1/
USE CSS to more filter
First change on load check, add price:
$('.table tbody tr').each(function(){
var _class = "";
_class += ($(this).find(".price").data("price") >= 2) ? "is_price " : "no_price ";
_class += ($(this).find(".impress").data("impress") >= 4) ? "is_impress " : "no_impress ";
console.log(_class);
$(this).addClass(_class);
});
Add an other handler to new filter:
$("input[name='priceStatus']").change(function(){
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_price")
: $("#StatusTable").addClass("active_price");
});
add new selector to the css rule:
#StatusTable.active_impress tr.no_impress,
#StatusTable.active_price tr.no_price{
display:none !important;
}
This is the result:
https://jsfiddle.net/Frogmouth/gkba343L/3/
Optimize code to add more filter:
HTML filter button:
<label class="btn btn-primary outline">
<input type="checkbox" name="impress" class="cssFilter radio" aria-pressed="true" autocomplete="off">Impress her
</label>
use cssFilter to indicate that is a css filter button and use name attribute to define the name of the filter, than use this namespace into the css class:
.active_{name} .no_{name} .is_{name}
And use a generic handler:
$("input.cssFilter").change(function(){
var _name = $(this).attr("name");
console.log(_name);
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_"+_name)
: $("#StatusTable").addClass("active_"+_name);
});
With this you can manage all the filter with an unique handler, remember to add the filter to onload check and the new selector for each new filter.
Fiddle:
https://jsfiddle.net/Frogmouth/gkba343L/4/

Categories

Resources