We Keep Coding

Only checked specific checkbox inside a loop with jQuery

In my project, my issue is when I click Select All I want just want this row's checkbox to be checked. The 1st image below is the initial state that I want when the event click on .give-all-permissions fires. I want to be the 2nd image but my it gives me the 3rd image output how to achieve like 2nd image. Please see all the images that I tried to get this to work.
1st img
2nd img
3rd img
my HTML markup
<div class="row permission-group">
<div class="col-lg-4">
<fieldset class="mt-1 {{ $loop->last ? null : 'mb-1' }}">
<div class="checkbox checkbox-shadow">
<input type="checkbox" class="give-all-permissions" id="module_{{ md5($module->id) }}">
<label class="cursor-pointer" for="module_{{ md5($module->id) }}">Select All</label>
</div>
</fieldset>
</div>
<div class="col-lg-8">
#foreach ($module->permissions as $permission)
<fieldset class="mt-1 {{ $loop->last ? null : 'mb-1' }}">
<div class="checkbox checkbox-shadow">
<input class="checked-input" type="checkbox" id="permission_{{ md5($permission->id) }}">
<label class="cursor-pointer" for="permission_{{ $permission->id }}">{{ $permission->name }}</label>
</div>
</fieldset>
#endforeach
</div>
</div>
my code
$(document).ready(function () {
$('.give-all-permissions').click( (e) => {
// e.preventDefault();
if (e.target.checked === true) {
$('.checked-input').each(function (i, el) {
el.setAttribute("checked", "checked");
this.checked = true;
});
} else if (e.target.checked === false) {
$('.checked-input').each(function (i, el) {
el.removeAttribute("checked");
this.checked = false;
});
}
})
})

Event propogation not working in AngularJs?

I made a custom contextmenu directive. And I am trying to log something when the contextmenu opens. However the same function runs 5 times, when its supposed to run once. I am trying to e.stopPropagation(); but the CSS doesn't apply from the first go, I have to click again, and then its working properly. What am I doing wrong?
Here's how my link function in the directive looks:
$ele.on('contextmenu', '*', function(e) {
e.preventDefault();
e.stopPropagation();
$scope.$apply(function () {
$scope.visible = true;
$('.parented').css({left:e.pageX, top:e.pageY, position: 'absolute'}).show();
var ele = e.target;
$scope.souls = {
elementType: ele.nodeName,
content: ele.innerText,
id: ele.id,
class: ele.className
}
console.log($scope.souls)
})
});
And the HTML
<div prevent visible="isVisible" ravi="someData" sound="sound(souls)" souls="souls">
<p class="haseebtesting">abc</p>
<table class="datatable">
<tr ng-repeat="t in templateData">
<td class="haseebtesting" ng-click="current.selected = t; confusedFunction(t)" id="{{'test ' + $index}}">{{t.templateName}}</td>
<td>{{t.templatePath}}</td>
</tr>
</table>
{{souls}} <br /><br />
<div ng-if="isVisible" class="parented">
<div class="btn-group-vertical notclick" role="group" aria-label="Vertical button group">
<form class="haseebform">
<input type="text" ng-model="souls.entername" placeholder="Enter name"> <br>
<input type="text" ng-model="souls.entercomment" placeholder="Enter comment">
<input type="button" class="btn btn-info" ng-click="addT(souls)" value="Submit">
</form>
</div>
</div>
</div>
Working link here: https://aijazkhan81.github.io/contextmenu/

Change color of multiple elements using a color picker

I am trying to figure out how I can change the color of all elements with the class of "change" using the Really Simple Bootstrap Color Picker. Here is the JS code.
$(function() {
var $inputs = $('input.color');
$inputs.colorPicker({pickerDefault: '#99CCFF'});
$inputs.each(function(idx, item) {
var $input = $(item);
var $target = $input.parents('.control-group:first').find('label:first');
$target.css('color', $input.val());
$input.on('colorPicker:preview colorPicker:change', function(e, value) {
$target.css('color', value);
});
$input.on('colorPicker:addSwatch', function(e, value) {
//do something with custom color (e.g. persist on the server-side)
});
});
});
HTML (I dont plan on using a form for all my elements. None of the elements below have a class of "change". I just included the code I had originally.)
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Pick a Color</label>
<div class="controls input-prepend">
<input type="text" name="color" class="color addSwatch" />
</div>
</div>
<div class="control-group">
<label class="control-label">Pick a Color</label>
<div class="controls input-prepend">
<input type="text" name="color" class="color input-small" />
</div>
</div>
</form>

getting a default value to display in a div

currently when the page loads the defualt value of 10 displays which is what I want like so:
the custom amount shows:
but if I type something in the custom area and then delete it no default value is displayed. As shown here:
How can I get 10 to show up even if the user deletes their custom amount. I basically want 10 to always show if the user doesn't enter an amount or click a another button
here is my js:
$(document).ready(function() {
$('#donation-amount').keyup(function() {
$('#display-amount').text($(this).val());
});
$( ".selectvalue" ).click(function() {
$('#display-amount').text($(this).val());
});
$(".buttons .btn").click(function(){
$(".buttons .btn").removeClass('active');
$(this).toggleClass('active');
});
$('#display-amount').text($('#default').val());
});
and my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
any help would be appreciated!

You can do this
store default in global and then apply when value is empty.
var defaultValue = 10;
$('#donation-amount').keyup(function() {
if($(this).val()) {
$('#display-amount').text($(this).val());
} else {
$('#display-amount').text(defaultValue );
}
});
See in action here http://jsbin.com/guxukodace/edit?html,js,output

Combining filters Jquery Isotope

I am trying to combine filters like this example: http://codepen.io/desandro/pen/JEojz/?editors=101 but I can't.
Codepen: http://codepen.io/anon/pen/gpbypp
HTML:
<div id="filters">
<label class="pull-left">Seats: </label>
<div class="btn-group" data-toggle="buttons" data-filter-group="seats">
<label class="btn btn-default active">
<input type="radio" data-filter="*">All
</label>
<label class="btn btn-default">
<input type="radio" data-filter=".seats-4">4
</label>
<label class="btn btn-default">
<input type="radio" data-filter=".seats-5">5
</label>
</div>
<br>
<br>
<label class="pull-left">Transmission: </label>
<div class="btn-group" data-toggle="buttons" data-filter-group="transmission">
<label class="btn btn-default">
<input type="radio" data-filter=".manual">Manual
</label>
<label class="btn btn-default">
<input type="radio" data-filter=".auto">Auto
</label>
</div>
</div>
<div id="isotope-container">
<div class="col-sm-3 item seats-5 auto">
<h3>Volkswagen Polo</h3>
<p>5 seats auto</p>
</div>
<div class="col-sm-3 item seats-4 auto">
<h3>Suzuki Jimny</h3>
<p>4 seats auto</p>
</div>
<div class="col-sm-3 item seats-4 manual">
<h3>Volkswagen Caddy</h3>
<p>4 seats manual</p>
</div>
<div class="col-sm-3 item seats-5 manual">
<h3>Opel Zafira</h3>
<p>5 seats manual</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Isotope website

Starting with the codepen from Pixelsmith, I swapped out the JS to match the example that you posted. I believe this is what you were looking for. The is-checked formatting is a little wonky, but the functionality is there.
This is the new JS. Working example
$('.filters').on( 'click', '.btn', function() {
var $this = $(this);
var $buttonGroup = $this.parents('.btn-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.btn-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}

There's an error in your JS that's stopping the function from running, and then quirks in your code that seem to break the function.
In the function you need to change the line $('#filters input').on('click', '.btn', function() { to $('#filters').on('click', '.btn', function() {, otherwise you're asking the browser to watch all inputs in the #filters div for a click on .btn and that won't ever happen.
Second, I couldn't get the filters to work with the label/radio combination that you'd created, but I did get it to work with buttons. Is there a reason you're choosing radio buttons? If so you'll need to work with the code a bit more to make it happen, and you may want to move away from click and use attr('checked') instead.
Working Codepen
Good luck!