Jquery check box filter - javascript

I am attemting to filter list items depending on whether certain checkboxes are checked or not.
I have managed to get the filtering to work but I am struggling to remove all list items on page load.
The idea is for 'list items' not to display untill the 'options' checkboxes are ckecked
I have placed my working version online here http://dev.perfectdaycanada.com/filter/
Thank you in advanced to anyone who can help me, it's much appreciated.
The javascript for filtering:
$(document).ready(function(){
$("input.type_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('type_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('type_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
$("input.start_check").attr("checked", "").click(function() {
if($(this).is(':checked')) {
$("#case-studies li."+$(this).attr('id')).removeClass('start_hidden');
$("#case-studies li").not(".type_hidden, .start_hidden").slideDown();
} else {
$("#case-studies li."+$(this).attr('id')).addClass('start_hidden');
$("#case-studies li."+$(this).attr('id')).slideUp();
}
});
});
HTML:
<div>
<input name="action-areas[]" type="checkbox" id="areas_crop_initiatives" value="0" class="type_check" checked="checked" />
<label for="areas_crop_initiatives">Crop initiatives</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_managment" value="1" class="type_check" checked="checked" />
<label for="areas_managment">Management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_assurance" value="2" class="type_check" checked="checked" />
<label for="areas_assurance">Assurance/certification</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_environmental" value="3" class="type_check" checked="checked" />
<label for="areas_environmental">Environmental management</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_biodiversity" value="4" class="type_check" checked="checked" />
<label for="areas_biodiversity">Biodiversity</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_staff" value="5" class="type_check" checked="checked" />
<label for="areas_staff">Staff</label>
</div>
<div>
<input name="action-areas[]" type="checkbox" id="areas_community" value="6" class="type_check" checked="checked" />
<label for="areas_community">Community</label>
</div>
<ul id="case-studies">
<li id="event_1768" class="ethics_agrochemical_usage ethics_input_costs farms_potatoes areas_crop_initiatives">– Potatoes, Poland</li>
<li id="event_2190" class="ethics_hcvl farms_beef areas_community areas_managment countries_austria">– Beef, Ireland</li>
<li id="event_2191" class="ethics_air_emissions farms_tomatoes areas_assurance countries_austria">– Tomatoes, Portugal</li>
</ul>

Just add the class type_hidden to your list items like this:
<li id="event_1768" class="other classes type_hidden">– Potatoes, Poland</li>
(and than for all list items of course)

Related

nextAll() and prevAll() selects only one element, not all of them

I have a div with divs inside with inputs and their labels like this:
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
When i hover one of labels with mouse, i want to select all next divs and all previous divs (for appliing some css to them). So i use this:
$( "input[name='appointment_rating']+label" )
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show hover element");
console.log($(this).parent().html());
console.log("now will show all nextAll elements");
console.log(h.html());
console.log("now will show all prevAll elements");
console.log(j.html());
console.log("_");
alert("now will show all next elements");
h.each(function() {
alert(h.html());
});
alert("now will show all prev elements");
j.each(function() {
alert(j.html());
});
})
.mouseleave(function() {
console.log("leaved");
});
So if a select label for input with value "3", i want to see in alerts html of elements 0,1,2 as next and 4,5 as previous. But i see only 2 and 4, so only one element is selected as next and only one as previous. By the way, for some reason they are shoen several times, not one. What is wrong? And here is the jsfiddle - https://jsfiddle.net/c81wbefg/
jQuery.html will only return the innerHTML of the first element in the collection of matched elements. To output all the elements, you can loop over the jQuery collection with jQuery.each.
$("input[name='appointment_rating']+label")
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show all next elements");
h.each(function() {
console.log($(this).html())
});
console.log("now will show all prev elements");
j.each(function() {
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>

How to sum value of radio button and checkbox in jquery

I have a code already working which calculates the sum of the radio buttons. I changed my mind in one of the radio button group and decided to make it a checkbox. When I tick items on the checkbox, the sum returns NaN. What would I add/change in my jquery in order for it to recognize the checkbox value?
Here's my code:
JQuery
< script type = "text/javascript" >
function calcscore() {
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
< /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
Appreciate all the help.
This code code should answer your question:
function calcscore() {
score = 0;
$(".calc:checked").each(function () {
score += Number($(this).val());
});
$("#price").text(score.toFixed(2));
$("#sum").val(score)
}
$().ready(function () {
$(".calc").change(function () {
calcscore()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" value="100" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
</li>
<input type="hidden" name="sum" id="sum" value="0">
<p>Total: PHP <span id="price">0</span>
</p>
for your markup and usecase as it stands now in the question.try this
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).parent().next().val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
try this,you dont need hidden fields for values.i removed them and used value property of checkbox.
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="100" id="rad1" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" />
</label>
</li>
<p>Total: PHP <span id="price">0</span>
</p>

jQuery (Mobile): get all checked items (checkboxes)

I got trouble finding a solution to this one.
I have an amount of checkboxes, and I want to get how many of them are checked.
Each time a box get checked/unchecked, the value needs to update.
What I have so far:
http://jsfiddle.net/drhmorw5/3/
My code so far:
function selected() {
var i = 0;
$("#names").each(function () {
if ($(this).prop("checked") === true) {
i++;
$("#checked").text("Sum Checked: " + i);
}
})
};
$("#checked").text("Sum Checked: ");
$(function(){
$('#names input[type=checkbox]').change(function(){
$("#checked").text($('#names input[type=checkbox]:checked').length);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="names">
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 1</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 2</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 3</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 4</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 5</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 6</label>
</div>
<br>
<br>
Sum Checked: <span id="checked">0</span>

Using JQuery to dynamically check if no of radio button many group has been checked

I know this question had a lots of related resources. But, Still i need a perfect solution.
I have generated five number of radio buttons group dynamically. Each group holds upto five radio buttons. I have validated "none checked in" and "at least one checked in feature" as an individual group.
My question is, How do I validate whether "All the groups are checked"
for ref:
My code Below:
var names = [];
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
});
// Goes through all the names and make sure there's at least one checked.
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if (radio_buttons.filter(':checked').length == 0) {
alert('none checked in ' + name);
}
else{
// At least one checked
var val = radio_buttons.val();
}
}
I need to redirect to other page when all the radio button groups are checked. Its a bit simple. But, look complex for me.
Please Help.
UPDATE
My generated HTML for first two groups.
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
</ul></div></div></div>
<div class="row">
<div class="optionsContainer"><div id="ratingContainer">
<ul class="0">
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
<li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
</ul></div></div></div>
note: Here group name alone gets changed.
Changed
<div id="ratingContainer">
to
<div class="ratingContainer"> .
Removed
onclick="checkThis(this);"
from html , added one event handler for all input elements
elems.find("input").on("change", checkThis);
Try
var allChecked = false;
var names = [];
var elems = $(".0");
function checkThis(e) {
var name = e.target.name;
if (names.length < elems.length) {
names.push(name);
};
allChecked = elems.get().every(function(el, i) {
return $(el).find(":checked").is("*")
});
alert(name + " checked");
if (allChecked) {
// do stuff
alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked);
};
};
elems.find("input").on("change", checkThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="0" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="0" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="0" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="0" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="0" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="optionsContainer">
<div class="ratingContainer">
<ul class="0">
<li>
<div class="ui-radio">
<input type="radio" value="Strongly disagree" name="1" id="1">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Disagree" name="1" id="2">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Neutral" name="1" id="3">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Agree" name="1" id="4">
</div>
</li>
<li>
<div class="ui-radio">
<input type="radio" value="Strongly agree" name="1" id="5">
</div>
</li>
</ul>
</div>
</div>
</div>
Looks like you already know how to count up the checked elements. If you put that in the first loop, you can mark a variable false if any come up empty.
var names = [];
var allChecked = true;
$('input[type="radio"]').each(function() {
// Creates an array with the names of all the different checkbox group.
names[$(this).attr('name')] = true;
if $(this).filter(':checked').length === 0 {
allChecked = false;
}
});
https://jsfiddle.net/eu6L1f80/2/
Javascript:
$('form').on('submit', function(e) {
e.preventDefault();
var checkboxes = {};
$(':checkbox').each(function() {
checkboxes[$(this).attr('name')] = true;
});
$.each(checkboxes, function(i, val) {
if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
});
if (!Object.keys(checkboxes).length) {
alert('success!');
} else {
alert('error!');
}
});
HTML:
<form>
<div>
Group:
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
<input type="checkbox" name="group1" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
<input type="checkbox" name="group2" value="" />
</div>
<div>
Group:
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
<input type="checkbox" name="group3" value="" />
</div>
<button type="submit">Submit</button>
<form>

jquery check and uncheck all with action

I have more checkbox input that call function "boxclick" when the user click on this:
<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">
For check/uncheck all i use simple jquery script:
<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">
My problem is when i check/uncheck all the function "boxclick" not run.
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
I think you can do:
HTML
<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">
jQuery
If you want to check/uncheck all checkbox:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', this.checked);
});
If you want to make select any one at a time:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', false);
this.checked = !this.checked;
});​
DEMO
Setting attribute of checkboxes to checked does not automatically fake a click event for you! Because you put those boxclick function calls within some "onclick" handlers, you must trigger a fake click event in order for your javascript to think that it clicked all the boxes. To trigger fake click event use $('#whatever').trigger('click'), for instance:
$('input[name*=\'selected\']').trigger('click');
If you want check/uncheck all functionality, you must say "ok, master checkbox, please listen for whenever I am checked or unchecked. When that happens, please set checked attribute of my slave boxes (your other boxes on the page) to match the master's current checked attribute." Like this:
function checkAllorUncheckAll(event){
var chiefCheckbx = event.currentTarget;
var myBoxes = $('input[name*=\'selected\']');
myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');
}
$('#masterCheckBox').on('change',checkAllorUncheckAll);
I guess
$('input[name*=\'selected\']').attr('checked',
this.checked).trigger('click');
should do the trick here
Demo
http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>

Categories

Resources