Develop Reference

Filtering divs (with different 'data' attributes) based on multiple different checkboxes

As shown below, I tried to make a script to filter posts based on different checkboxes' values but I ended up having untargeted posts.
The problem I'm having is located in the match() method (I guess). I tried using the '&&' operator but that couldn't help.
I want to have posts based on the checkboxes I checked.
Thanks in advance!
Link: https://codepen.io/resourceful_geek/pen/JjvWLEj
var $filterCheckboxes = $('.filter-container input[type=checkbox]');
var posts = ".post";
$filterCheckboxes.on("change keyup", function() {
//var filteredCheckboxesSample = ['translation', 'proofreading', 'intermediate', 'expert', '1'];
//var textStringSample = filteredCheckboxes.toString();
var selectedFilters = {};
var textString = "";
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty('filter')) {
selectedFilters['filter'] = [];
}
selectedFilters['filter'].push(this.value);
textString = selectedFilters['filter'].toString();
})
$(posts).hide().filter(function() {
var rtnData = "";
regExAll = new RegExp(textString.split(",").map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|'), 'i');
rtnData = (
$(this).attr("data-category").match(regExAll) || $(this).attr("data-level").match(regExAll)
);
return rtnData;
}).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Filtered Posts</h1>
<div class="post-container">
<div class="post" data-id="1" data-job="translator" data-name="John" data-date="2021" data-level="beginner" data-price="20" data-rate="1" data-verified="1" data-category="translation">Translation | Beginner</div>
<div class="post" data-id="2" data-job="proofreader" data-name="Peter" data-date="2021" data-level="expert" data-price="20" data-rate="5" data-verified="1" data-category="proofreading">proofreading | expert</div>
<div class="post" data-id="3" data-job="translator" data-name="Steve" data-date="2021" data-level="intermediate" data-price="20" data-rate="1" data-verified="1" data-category="translation">Translation | intermediate</div>
<div class="post" data-id="4" data-job="content_crafting" data-name="Bil" data-date="2021" data-level="beginner" data-price="20" data-rate="2" data-verified="0" data-category="content_crafting">content_crafting | Beginner</div>
<div class="post" data-id="5" data-job="translator" data-name="Noah" data-date="2021" data-level="intermediate" data-price="20" data-rate="1" data-verified="0" data-category="translation">Translation | intermediate</div>
</div>
<h1>Filtering Area</h1>
<div class="filter-container">
<p>Filter by Category</p>
<div>
<input class="translation" type="checkbox" id="translation" name="service_categories" value="translation"></label>
<label for="translation">translation
</div>
<div>
<input class="proofreading" type="checkbox" id="proofreading" name="service_categories" value="proofreading"></label>
<label for="proofreading">proofreading
</div>
<div>
<input class="content_crafting" type="checkbox" id="content_crafting" name="service_categories" value="content_crafting"></label>
<label for="content_crafting">content_crafting
</div>
<p>Filter by Level</p>
<div>
<input class="beginner" type="checkbox" id="beginner" name="service_categories" value="beginner"></label>
<label for="beginner">beginner
</div>
<div>
<input class="intermediate" type="checkbox" id="intermediate" name="service_categories" value="intermediate"></label>
<label for="intermediate">intermediate
</div>
<div>
<input class="expert" type="checkbox" id="expert" name="service_categories" value="expert"></label>
<label for="expert">expert
</div>
</div>

jQuery selector value returns undefined

I'm getting undefined of my variable 'base' which is basic $('slider').value. I have added a console.log(base) to test what is returned, but the value is undefined.
Here is my html:
jQuery(document).ready(function($) {
let precentage = 17.5;
let commision = 0.2746;
function cost() {
let base = $('#slider').value;
let precentAmout = base * (precentage / 365 * 30);
let commisionAmout = base * commision;
let totalCost = commisionAmout + precentAmout;
let totalSum = base + commisionAmout + precentAmout;
console.log(base);
$('#cost').text(totalCost);
$('#sum').text(totalSum);
}
$('#slider').on('change', function() {
$('#amout').text(this.value);
cost();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc">
<div class="range-title">
<h2 class="range-label">Ile chcesz pożyczyć?</h2>
<div class="display-wrap">
<span id="amout">500</span><span class="currency"> zł</span>
</div>
</div>
<div class="range-wrap">
<button class="buttons-change-value">-</button>
<input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500">
<button class="buttons-change-value">+</button>
</div>
<div class="summary-container">
<div class="summary-box">
<h3>Koszt:<br>
<span id="cost">200</span><span class="currency"> zł</span></h3>
</div>
<div class="summary-box">
<h3>Do zwrotu:<br>
<span id="sum">200</span><span class="currency"> zł</span></h3>
</div>
<div class="summary-box">
<h3>RRSO:<br>
<span id="rrso">200</span><span class="percentage"> %</span></h3>
</div>
</div>
</div>
Do You have an idea why this is happening?

In JQuery, .val() function is available to get value of textbox.
let base = $('#slider').val()
jQuery(document).ready(function($) {
let precentage = 17.5;
let commision = 0.2746;
function cost() {
let base = $('#slider').val();
let precentAmout = base * (precentage / 365 * 30);
let commisionAmout = base * commision;
let totalCost = commisionAmout + precentAmout;
let totalSum = base + commisionAmout + precentAmout;
console.log(base);
$('#cost').text(totalCost);
$('#sum').text(totalSum);
}
$('#slider').on('change', function() {
$('#amout').text(this.value);
cost();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc">
<div class="range-title">
<h2 class="range-label">Ile chcesz pożyczyć?</h2>
<div class="display-wrap">
<span id="amout">500</span><span class="currency"> zł</span>
</div>
</div>
<div class="range-wrap">
<button class="buttons-change-value">-</button>
<input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500">
<button class="buttons-change-value">+</button>
</div>
<div class="summary-container">
<div class="summary-box">
<h3>Koszt:<br>
<span id="cost">200</span><span class="currency"> zł</span></h3>
</div>
<div class="summary-box">
<h3>Do zwrotu:<br>
<span id="sum">200</span><span class="currency"> zł</span></h3>
</div>
<div class="summary-box">
<h3>RRSO:<br>
<span id="rrso">200</span><span class="percentage"> %</span></h3>
</div>
</div>
</div>

jQuery objects don't have a value property, they have a val() method.

You can always pass the base variable value as a parameter to the cost function like this cost(this.value). That would make more sense since you are already fetching the slider value once via onChange no need to do it again inside the cost function.
Please take a look at the working snippet below.
jQuery(document).ready(function ($) {
let precentage = 17.5;
let commision = 0.2746;
function cost(sliderValue) {
let base = sliderValue;
let precentAmout = base * (precentage / 365 * 30);
let commisionAmout = base * commision;
let totalCost = commisionAmout + precentAmout;
let totalSum = base + commisionAmout + precentAmout;
console.log(base);
$('#cost').text(totalCost);
$('#sum').text(totalSum);
}
$('#slider').on('change', function () {
$('#amout').text(this.value);
cost(this.value);
});})
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="calc">
<div class="range-title">
<h2 class="range-label">Ile chcesz pożyczyć?</h2>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="display-wrap">
<span id="amout">500</span><span class="currency"> zł</span>
</div>
</div>
<div class="range-wrap">
<button class="buttons-change-value">-</button>
<input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500">
<button class="buttons-change-value">+</button>
</div>
<div class="summary-container">
<div class="summary-box">
<h3>Koszt:<br>
<span id="cost">200</span><span class="currency"> zł</span></h3>
</div>
<div class="summary-box">
<h3>Do zwrotu:<br>
<span id="sum">200</span><span class="currency"> zł</span></h3>
</div>
<div class="summary-box">
<h3>RRSO:<br>
<span id="rrso">200</span><span class="percentage"> %</span></h3>
</div>
</div>
</div>
</body>
</html>

How to select all the check boxes in nested ng-repeat

I'm trying to create a list where there are multiple select all buttons to for ng-repeat check boxes.
HTML code
<div class="col-xs-12"ng-repeat="items in testArray">
<div class="col-xs-6">
{{items.brand}}
</div>
<div class="col-xs-6 col-sm-offset-6">
<button ng-click="selectAll()">select All</button>
<div ng-repeat="i in items.form">
<input type="checkbox"/>{{i.formName}}
</div>
</div>
</div>

you can try it.this example you can manipulate it according to your need
https://plnkr.co/edit/qD7CABUF9GLoFCb8vDuO?p=preview
$scope.test=function(event){
if(event.currentTarget.checked==true)
{
var togglestatus=$scope.isAllSelected;
angular.forEach($scope.options,function(object){
object.selected=togglestatus
})
}else{
angular.forEach($scope.options,function(object){
object.selected=false
})
}
}
html:
<body ng-app="test" ng-controller="testctrl">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-click="test($event)">SelectAll</label>
<div ng-repeat="option in options">
<input type="checkbox" ng-model="option.selected">checkbox</div>
</body>

Please check ngChecked directive. You need to add it to your input
<input type="checkbox" ng-checked="i.isChecked" />
and then in selectAll() method set isChecked property on every item to true.

look at code snippet given below , this will give you idea.
var app = angular.module("myApp",[]);
app.controller('demoCtrl',function($scope){
$scope.itemsArray = [{name:"Test 1",forms:[{formName:"xyz 1 "},{formName:"xyz 1 "}]},{name:"Test 2",forms:[{formName:"xyz 2 "},{formName:"xyz 1 "}]},{name:"Test 3 ",forms:[{formName:"xyz 3"},{formName:"xyz 1 "}]}];
$scope.selectAll = function(item){
for(var i =0;i < item.forms.length;i++)
{
item.forms[i].isChecked = true;
}
}
$scope.removeAll = function(item) {
for(var i =0;i < item.forms.length;i++)
{
item.forms[i].isChecked = false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="demoCtrl">
<div ng-repeat="item in itemsArray">
<span>{{item.name}}</span>
<button ng-click="selectAll(item)"> select All </button>
<button ng-click="removeAll(item)"> Deselect All </button>
<div ng-repeat="i in item.forms">
<input type="checkbox" ng-model="i.isChecked"/>
</div>
</div>
</div>
</div>

You can simply set a variable to true like this
ng-click="selectAll = true"
and then use the ng-checked directive to set the checkbox to checked when the expression inside is true
ng-checked="selectAll"
HTML
<div class="col-xs-12"ng-repeat="items in testArray">
<div class="col-xs-6">
{{items.brand}}
</div>
<div class="col-xs-6 col-sm-offset-6">
<button ng-click="selectAll = true">select All</button>
<div ng-repeat="i in items.form">
<input type="checkbox" ng-checked="selectAll"/>{{i.formName}}
</div>
</div>
</div>

Created a fiddle, showcasing your need for requirement "select all" - http://jsfiddle.net/deeptechtons/TKVH6/
//html
<div>
<ul ng-controller="checkboxController">
<li>Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
</div>
//js
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});

Dynamic angular models?

Okay, so I am building a fake dish builder for a restraunt. I have a form that includes everything you need to build it, and the only thing I am having trouble with is the ingredient list. Here is my HTML:
<div class="icheckbox" ng-repeat="ing in ingredientList">
{{ing}}
<input type="checkbox" name="{{ing}}" ng-click="addIngredient(ing)"/>
<input type="number" name="more" ng-model="ings.ing.more" placeholder="price for extra"/>
<input type="number" name="less" ng-model="ings.ing.less" placeholder="price for less/none"/>
</div>
and here is the (relevent) JS:
$scope.ings = {};
$scope.ingredientList = ['lettuce', 'tomatoe', 'steak', 'pulled pork', 'green onion', 'red onion', 'mozarella', 'cheddar', 'bacon bits', 'chicken'];
$scope.addIngredient = function(which){
$scope.ings[which] = which;
}
$scope.makeItem = function(item){
item.ingredients = $scope.ings;
console.log(item);
ItemService.createItem(item)
.then(handleRes, handleRes);
}
As I'm sure you guessed, when I am trying to check a box for a specific ingredient and add the price modifiers for more or less of that specific ingredient, it modifies the price for all ingredients in the list. E.g., I can't have individual modifiers because of the model. I know this is a problem with the model, but how can I rewrite my code to accomplish what I'm doing?
for those reading this after the correct answer has been chosen, see the fiddle located here to see a more accurate HTML of what I was working with. By the way, the fiddle doesn't entirely work (for reasons I don't know, but I rarely use JSFiddle), but it is super easy to understand what I was trying to do if you see it I think. http://jsfiddle.net/Lrpjwyrg/13/

i a bit change your fiddle:
first, use ng-model="ings[ing].more" and ng-model="ings[ing].less".
second, save object in ings array instead of just string
$scope.addIngredient = function(which) {
$scope.ings[which] = {
name: which
};
}
angular.module('CpCtrl', []).controller('ControlPanelCtrl', [
'$scope',
function($scope) {
$scope.message = '';
$scope.inglist = ['lettuce', 'tomatoe', 'steak', 'pulled pork', 'green onion', 'red onion', 'mozarella', 'cheddar', 'bacon bits', 'chicken'];
$scope.sauceList = ['bbq', 'ranch', 'nacho cheese', 'yum sauce'];
$scope.ings = {};
$scope.addIngredient = function(which) {
$scope.ings[which] = {
name: which
};
}
$scope.makeItem = function(item) {
item.ingredients = $scope.ings;
console.log(item);
}
}
]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid text-center" ng-app="CpCtrl" ng-controller="ControlPanelCtrl">
<div class="row">
<div class="page-title text-center">
<h3> Welcome</h3>
</div>
</div>
<div class="row">
<div class="jumbotron">
<h2> Make Item </h2>
<form>
<div class="form-group">
<label for="itemname">Item Name</label>
<input class="form-control" type="text" ng-model="item.itemname" id="itemname" />
</div>
<div class="form-group">
<label for="itemdescription">Item Description</label>
<textarea class="form-control" ng-model="item.itemdescription" id="itemdescription"></textarea>
</div>
<!-- pizza, sub or spud -->
<label>
<div class="icheckbox_square-green">
<input type="checkbox" name="pizza" ng-model="item.pizza" ng-click="setBase()" />Pizza
</div>
</label>
<label>
<div class="icheckbox">
<input type="checkbox" name="sub" ng-model="item.sub" ng-click="setBase()" />Sub
</div>
</label>
<label>
<div class="icheckbox">
<input type="checkbox" name="spud" ng-model="item.spud" ng-click="setBase()" />Spud
</div>
</label>
<!-- end -->
<!-- prices -->
<div class="form-group">
<label for="spud-price" ng-if="item.spud">Spud Price</label>
<input class="form-control" type="number" name="spud-price" ng-if="item.spud" id="spud-price" ng-model="item.price.spud" />
</div>
<div class="form-group">
<label for="pizza-price" ng-if="item.pizza">Pizza Price</label>
<input class="form-control" type="number" name="pizza-price" ng-if="item.pizza" ng-model="item.price.pizza" />
</div>
<div class="form-group">
<label for="sub-price" ng-if="item.sub">Sub Price</label>
<input class="form-control" type="number" name="sub-price" ng-if="item.sub" ng-model="item.price.sub" />
</div>
<!-- end -->
<!-- ingredients -->
<div ng-repeat="ing in inglist">
{{ing}}
<input type="checkbox" name="{{ing}}" ng-click="addIngredient(ing)" />
<input type="number" name="more" ng-model="ings[ing].more" placeholder="price for extra" />
<input type="number" name="less" ng-model="ings[ing].less" placeholder="price for less/none" />
</div>
<!-- end -->
<!-- picture -->
<div class="form-group">
<label for="picture">Add Picture(s)</label>
<input type="file" name="picture" />
</div>
<!-- end -->
<a class="btn btn-primary" ng-click="makeItem(item)">Create</a>
</form>
</div>
</div>
<!-- end item creation -->

I don't know if this is the right answer. But i think it is close to what you want.
angular.module('app', [])
.controller('cntrl', function ($scope) {
$scope.ingredientList = [{
name: 'lettuce',
count: 0,
price: 23,
selected: false
}, {
name: 'tomatoe',
count: 0,
price: 87,
selected: false
}, {
name: 'steak',
count: 0,
price: 98,
selected: false
}, {
name: 'pulled pork',
count: 0,
price: 292,
selected: false
}];
$scope.setItOne = function (idx) {
if ($scope.ingredientList[idx].count < 1) {
$scope.ingredientList[idx].count = 1;
}
updateSelectedingredients();
};
function updateSelectedingredients() {
$scope.selectedingredients = $scope.ingredientList.filter(function (item) {
return item.selected;
});
}
$scope.getTotal = function(){
var total = 0;
( $scope.selectedingredients || []).forEach(function(item){
total = total + item.count * item.price;
});
return total;
};
$scope.makeItem = function () {
alert(JSON.stringify($scope.selectedingredients));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="cntrl">
<div class="icheckbox" ng-repeat="ing in ingredientList">{{ing.name}}
<input type="checkbox" name="{{ing}}" ng-model="ing.selected" ng-change="setItOne($index)" />
<button ng-click="ing.count = ing.count + 1">Up</button>
<button ng-click="ing.count = ing.count - 1" ng-disabled="ing.count < 1">Down</button>
| {{ing.count}} x {{ing.price | currency}} = {{ing.count * ing.price | currency}}
</div>
<hr/>
<div>Selected items
<ul>
<li ng-repeat="item in selectedingredients">{{item.name }} x {{item.count}} -> {{item.count}} x {{item.price | currency}} = {{item.count * item.price| currency}}</li>
</ul>
<b>Total: {{ getTotal() | currency}}</b>
</div>
<button ng-click="makeItem()">Make Item</button>
</div>
</div>

Hide the content only the two corresponding checkboxes are unchecked

<script type="text/javascript">
$('#checkallindus').click(function () {
if($('#checkallindus').attr('checked',false)){
$('.cat1').hide();
}
});
$('#checkallpro').click(function () {
if ($('#checkallpro').attr('checked', false)) {
$('.cat2').hide();
}
});
$('.checkall').click(function () {
if ((document.getElementById('checkallindus').checked == false) && (document.getElementById('checkallprod').checked == false)) {
$('.disp').hide();
}
});
</script>
<html>
<body>
<div class="disp">
Case 1
<div class="cat1">Industry: Environment</div>
<div class="cat2">Product: ASP.NET</div>
<div class="des">The asp.net product in the envirnmen industry</div>
</div>
<div class="disp">
Case 2
<div class="cat1">Industry: Hobbyist</div>
<div class="cat2">Product: WinRT</div>
<div class="des">The Winrt product in the hobbyist industry</div>
</div>
<div class="disp">
<div class="cat1">Industry: Hobbysit</div>
<div class="cat2">Product: ASP.NET</div>
<div class="des">The ASP.NET product in the hobbyist industry</div>
</div>
<div class="head">Industry</div>
<input type="checkbox" id="checkallindus" checked/>ALL
<input type="checkbox" class="checkindus" checked/>Environment
<input type="checkbox" class="checkindus" checked/>Hobbyist
<div class="head">Product</div>
<input type="checkbox" id="checkallpro" checked/>ALL
<input type="checkbox" class="checkpro" checked/>ASP.NET
<input type="checkbox" class="checkpro" checked/>WinRT
</body>
</html>
In the code I have written the script for the "ALL" checkboxes but for indivual checkboxes I am unable to write the script. The content under "disp" must be hidden only if the checkbox under industry and also the corresponding checkbox under product is unchecked. Can anyone help me how to write the script in this case.

I made this, check is it fulfilling your needs or not.
<html>
<script type="text/javascript" src="./jquery.js"></script>
<body>
<div class="disp">
Case 1
<div class="cat1 env" style="display: block;">Industry: Environment</div>
<div class="cat2 net">Product: ASP.NET</div>
<div class="des">The asp.net product in the envirnmen industry</div>
</div>
<div class="disp">
Case 2
<div class="cat1 hobb" style="display: block;">Industry: Hobbyist</div>
<div class="cat2 win">Product: WinRT</div>
<div class="des">The Winrt product in the hobbyist industry</div>
</div>
<div class="disp">
Case 3
<div class="cat1 hobb" style="display: block;">Industry: Hobbysit</div>
<div class="cat2 net">Product: ASP.NET</div>
<div class="des">The ASP.NET product in the hobbyist industry</div>
</div>
<div class="head">Industry</div>
<input id="checkallindus" type="checkbox" checked="">ALL
<input class="checkindus" type="checkbox" checked="" id="indEnv">Environment
<input class="checkindus" type="checkbox" checked="" id="indHobb">Hobbyist
<div class="head">Product</div>
<input id="checkallpro" type="checkbox" checked="">ALL
<input class="checkpro" type="checkbox" checked="" id="prodNet">ASP.NET
<input class="checkpro" type="checkbox" checked="" id="prodWin"> WinRT
<script type="text/javascript">
$('#checkallindus').change(function () {
console.log($('#checkallindus').attr('checked'));
if($('#checkallindus').attr('checked')){
$('.cat1').show();
}else {
$('.cat1').hide();
}
});
$('#checkallpro').change(function () {
if ($('#checkallpro').attr('checked')) {
$('.cat2').show();
}else{
$('.cat2').hide();
}
});
$("#indEnv").change(function(){
if($("#indEnv").attr("checked")){
$(".env").show();
}else {
$(".env").hide();
}
});
$("#indHobb").change(function(){
if($("#indHobb").attr("checked")){
$(".hobb").show();
}else {
$(".hobb").hide();
}
});
$("#prodNet").change(function(){
if($("#prodNet").attr("checked")){
$(".net").show();
}else {
$(".net").hide();
}
});
$("#prodWin").change(function(){
if($("#prodWin").attr("checked")){
$(".win").show();
}else {
$(".win").hide();
}
});
</script>
</body>
</html>