When I click on Select, a box opens and we select many options, including father and child.When options are selected
After selection, immediately display the ID numbers on the input. When we click OK, the box will be hidden. I want each of the boxes to be done separately in the input .This is My Html:
<button class="btn-select">Select one ...</button>
<div class="box" style="display:none">
<input type="checkbox" class="checkbox" value="1">Check Box 1
<input type="checkbox" class="checkbox" value="2">Check Box 2
<input type="text" class="input input-1" value="">
<button class="btn-ok">Ok</button>
</div>
<button class="btn-select">Select Two (Father/Children) ...</button>
<div class="box" style="display:none">
<ul class="father">
<li>
<input type="checkbox" class="checkbox" value="1">Part 1
<ul class="children">
<li><input type="checkbox" class="checkbox" value="5">Check Box 5</li>
</ul></li>
<li>
<input type="checkbox" class="checkbox" value="2">Part 2
<ul class="children">
<li><input type="checkbox" class="checkbox" value="7">Check Box 7</li>
<li><input type="checkbox" class="checkbox" value="8">Check Box 8</li>
</ul></li></ul>
<input type="text" class="input input-2" value="">
<button class="btn-ok">Ok</button>
</div>
.
...Select Three...
..Select Four..
..
.
This is My JS (Children and Father):
handleChildren = function() {
var $checkbox = $(this);
var $checkboxChildren = $checkbox.parent();
$checkboxChildren.each(function() {
if ($checkbox.is(":checked")) {
$(this).prop("checked", "checked");
} else {
$(this).removeProp("checked");
}
});
};
handleParents = function(current) {
var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
$parent.prop("checked", "checked");
} else {
$parent.removeProp("checked");
}
handleParents($parent);
}
$("ul.father").find("input[type=checkbox]").each(function() {
$(input).on("click", handleChildren);
$(input).on("click", function() {
handleParents(this);
});
});
This is My JS:
$(document).on('click', '.btn-ok', function(){
$('.box').hide()
});
$(document).on('click', '.btn-select', function(){
$('.box').hide()
$(this).next().show();
});
$(".checkbox").change(function() {
var text = "";
$(".checkbox:checked").each(function() {
text += $(this).val() + ",";
});
text = text.substring(0, text.length - 1);
$(this).next().val(text);
});
Now an error is shown by the console that says:
Uncaught InternalError: too much recursion
closest file:///var/www/html/jquey.js:1
Your handleParents calls itself unconditionally.
Related
I am dynamically able to add a new li element on checked event of a checkbox. However I am not able to remove the same on the unchecked event.
$(document).ready(function() {
var value;
$(".tmCheckbox").change(function() {
if (this.checked) {
value = $(this).val();
$('.ul_sec').append($('<li>', {
text: value
}));
} else {
// $(this).parent().remove();
}
});
});
HTML CODE:
<h3>MY SELECTION </h3>
<ul class="ul_sec" style="display: block;">
<li><input type="checkbox" name="filter" value="">Random Text 1</li>
<li><input type="checkbox" name="filter" value="">Random Text 2</li>
</ul>
<h3>FILTER</h3>
<ul style="display: block;">
<li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 1">Random Text 1</li>
<li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 2">Random Text 2</li>
<li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 3">Random Text 3</li>
</ul>
Filter out li element based on text content using filter() method and remove it using remove() method.
var $this = this;
$('.ul_sec li').filter(function(){
return $(this).text() == $this.value;
}).remove();
$(document).ready(function() {
var value;
$(".tmCheckbox").change(function() {
var value = $(this).val();
if (this.checked) {
$('.ul_sec').append($('<li>', {
html: this.outerHTML + value
}));
} else {
$('.ul_sec li').filter(function() {
return $(this).text() == value;
}).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>MY SELECTION </h3>
<ul class="ul_sec" style="display: block;">
</ul>
<h3>FILTER</h3>
<ul style="display: block;">
<li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 1">Random Text 1</li>
<li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 2">Random Text 2</li>
<li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 3">Random Text 3</li>
</ul>
Just use remove() to the target where it is appended
Like this:
$(document).ready(function() {
var value;
$(".tmCheckbox").change(function() {
if (this.checked) {
value = $(this).val();
$('.ul_sec').append($('<li>', {
text: value
}));
} else {
$('.ul_sec li').last().remove();
}
});
});
document.getElementById("yourid").remove(); giving an id to the <li> you just added.
The idea is to filter divs by comparing dynamically generated classes for divs and dynamically generated id's for checkboxes, where only divs with classes matching id's of checked checkboxes would show.
First subnav filters everything fine. However, subnav2 dosen't do anything.
Simplified html of it
<div class="itemswrap">
<div class="inditem dynamic1 dynamic12"></div>
<div class="inditem dynamic2 dynamic22"></div>
<div class="inditem dynamic3 dynamic32"></div>
<div class="inditem dynamic2 dynamic42"></div>
</div>
<ul class="subnav">
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic1" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic2" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic3" />
<label for="dynamic1">whatever label</label>
</li>
</ul>
<ul class="subnav2">
<li class="lifilter2">
<input type="checkbox" class="filtercheck2" id="dynamic12" />
<label for="dynamic12">whatever label</label>
</li>
<li class="lifilter2">
<input type="checkbox" class="filtercheck2" id="dynamic22" />
<label for="dynamic12">whatever label</label>
</li>
<li class="lifilter2">
<input type="checkbox2" class="filtercheck2" id="dynamic32" />
<label for="dynamic12">whatever label</label>
</li>
</ul>
And the js i've got so far.
var $filters = $('.filtercheck').change(function() {
var $items = $('.inditem').hide();
var filters = $filters.filter(':checked').map(function() {
return '.' + this.id;
}).get();
if (filters.length) {
$items.filter(filters.join()).show();
} else {
$items.show();
}
});
var $filtersb = $('.filtercheck2').change(function() {
var $itemsb = $('.inditem').hide();
var filtersb = $filtersb.filter(':checked').map(function() {
return '.' + this.id;
}).get();
if (filtersb.length) {
$itemsb.filter(filters.join()).show();
} else {
$itemsb.show();
}
});
I see that you fixed it but I had created a jsfiddle for your problem, akin to one I had to face in another project. Basically, you create a string from the checked checkboxes IDs and use that to show only those items that match the elements you checked. If no elements are checked, all items are shown (i.e. no filters are applied).
$("input[type='checkbox']").change(function()
{
var list = "";
$("input[type='checkbox']").each(function()
{
if(this.checked)
{
list = list + '.' + $(this).attr('id');
}
});
if(list !=='')
{
$("div.inditem").hide();
$(list).show();
}
else {
$("div.inditem").show();
}
});
I am doing filter with checkbox using JQuery. I want to put diferent div selected checkbox list , also when I click delete the category's icon , It will be delete selected checkbox list and other div area's checkbox list. How can i do this please help ?
Like This IMAGE :
You can viev with JSDFiddle -> http://jsfiddle.net/XRJ2d/
HTML :
<div style="background-color:#ccc; width:90%; height:30px;">
Selected checkbox Filter list ->
<br>
<img src="http://i.stack.imgur.com/5iWr1.jpg"/>
<br><br><br><br>
<div class="tags">
<label>
<input type="checkbox" rel="arts" />
Arts
</label>
<label>
<input type="checkbox" rel="computers" />
Computers
</label>
<label>
<input type="checkbox" rel="health" />
Health
</label>
<label>
<input type="checkbox" rel="video-games" />
Video Games
</label>
</div>
<ul class="results">
<li class="arts computers">Result 1</li>
<li class="video-games">Result 2</li>
<li class="computers health video-games">Result 3</li>
<li class="arts video-games">Result 4</li>
</ul>
Javascript :
$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
if( $('div.tags').find('input:checked').length > 0)
{
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
}else{
$('.results > li').show();
}
});
});
I think this is what you want, just give it a little style and volla: http://jsfiddle.net/XRJ2d/4/
$(document).ready(function () {
$('div.tags').find('input:checkbox').on('click', function () {
$('.results > li').hide();
$('#tags').html('<div id="selectedTags">Selected Tags : </div>');
if( $('div.tags').find('input:checked').length > 0)
{
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
$('#tags').append('<span class="tagDiv">'+$(this).attr('rel').toUpperCase()+'<span class="delete">x</span></span>');
});
}else{
$('.results > li').show();
}
});
$(document).on('click','.delete',function(){
var tagName=$(this).parent().text();
tagName=tagName.slice(0,-1).toLowerCase();
$('input').each(function(){
if($(this).attr('rel')==tagName){
$(this).trigger('click');
$(this).trigger('click');
$(this).attr('checked',false);
}
});
});
});
Hi I've got a form with nested Checkbox on three level
With Jquery I need to checked/uncheked all the children when I check a parent level... and of course uncheck the parent if at least one of the children is uncheck
I try but never success that's why I'm calling your help :)
Many thanks to all
My html code :
Demo here : http://jsfiddle.net/SENV8/86/
<fieldset class="floral">
<input type="checkbox" class="familybox cbox">
<label>Level 1</label>
<ul class="valuelist">
<li>
<input type="checkbox" class="cbox mainoption">
<label>Level 2</label>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" class="cbox mainoption">
<label>Level 2</label>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
</li>
</ul>
</fieldset>
EDIT :
I'm here with my script:
$('.familybox').change(function() {
var getparent = $(this).closest('fieldset').attr('class');
if($('.'+getparent+' .familybox').is(':checked')){
$('.'+getparent+' .valuelist input:checkbox').prop('checked', true);
} else if($('.'+getparent+' .familybox').not(':checked')) {
$('.'+getparent+' .valuelist input:checkbox').prop('checked', false);
}
});
See I have Implemented your requirement.
It is needed to make some changes in HTML which I have did in JSfiddle.
Total Jquery script is as follow:
<script type="text/javascript">
$(document).ready(function () {
$.extend($.expr[':'], {
unchecked: function (obj) {
return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
}
});
$(".floral input:checkbox").live('change', function () {
$(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));
for (var i = $('.floral').find('ul').length - 1; i >= 0; i--) {
$('.floral').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
});
}
});
});
</script>
To see live demo:
JSFiddle
I'm having trouble getting my var to accept more than one input.
When I select one checkbox, it shows me the value, however, when I select anymore I got an undefined error.
JavaScript
window.onload = function() {
var input= document.querySelectorAll('input#add2basket');
var radio= document.querySelectorAll('input#hi');
for (var j=0; j < radio.length; ++j){//loops over buttons
radio[j].onclick = function (){// find radio button
var input = findChecked(this.name);
alert (input.value)
return false;
// determine pizza size
//var size = input.value==='1'?‘Small':(input.value==='2'?'Regular':'Large');
// determine pizza price
//var price =Number(input.getAttribute('data‐price'));
// add a ‘new’ pizza to the basket
//addToBasket(newPizza(this.name,size, price));
};
};
function findChecked(name){
var css = 'input#hi[name="'+name+'"]';
var inputs = document.querySelectorAll(css);
var checked = _.filter(inputs, function (input){
document.write('<pre>'+input.checked+'</pre>')
return input.checked;
});
return checked.length===1?checked[0]:null;
}
}
HTML
<div>
<fieldset>
<legend class="Topping">Topping</legend>
<ul>
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="1"> <label class=
"box">Double Cheese</label></li>
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="2"> <label class=
"box">Peppers</label></li>
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="3"> <label class=
"box">Pepperoni</label></li>
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="4"> <label class=
"box">Olives</label></li>
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="5"> <label class=
"box">Beef</label></li>
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="6"> <label class=
"box">Seafood</label></li>
</ul>
</fieldset>
</div><!-- end topping -->
</form>
<div id="actionbtn">
<!--== action buttons==-->
<input class="apply" type="button" value=
"Back To Menu">
<input class="apply" name="top" id="add2basket" id="actionbtn2" type="button"
value="Proceed">
</div><!--==end of action buttons==-->
When I print the input.checked, it shows the selected boxes as true but where do i go from there
JavaScript solutions only please.
The attribute id must be unique across the whole document.
<li class="lastset"><input class="cbox" id="hi" name=
"top" type="checkbox" value="6"> <label class=
"box">Seafood</label></li>
updated code:
<li class="lastset"><input class="cbox" id="hi_1" name=
"top" type="checkbox" value="6"> <label class=
"box">Seafood</label></li>
(do this for every li and give each li its own id, if you really need an id in a li tag
To get all your inputs, use a different selector, like the class-attribute:
var css = 'input.cbox[name="'+name+'"]';
var radio= document.querySelectorAll('input.cbox');
Just select checkboxes by class name (and don't duplicate id's):
window.onload = function () {
var input = document.querySelectorAll('input#add2basket');
var radio = document.querySelectorAll('input.cbox');
for (var j = 0; j < radio.length; j++) {
radio[j].onchange = function () {
var input = findChecked(this.name);
return false;
};
};
function findChecked(name) {
var css = 'input.cbox:checked';
var inputs = document.querySelectorAll(css);
return inputs;
}
}
Pluss you can simplify selection of the checked only using :checked pseudo selector.
http://jsfiddle.net/BPFTp/1/