As continuation of my previous question dealing with checkboxes in MVC. I've been doing just like this from this question but it seems that it's not working because of the hidden field created by the CheckBoxFor of MVC. Any idea why? Here's my fiddle showing the actual html
My actual html from CheckboxFor:
<form role="form">
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false">
<label for="1"><b>Faa</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="2">Faa1</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="3" name="[1].IsSelected" type="checkbox" value="true"><input name="[1].IsSelected" type="hidden" value="false">
<label for="3"><b>Fee</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="4" name="[1].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="4">Fee1</label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="5" name="[1].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[1].SubsCategories[1].IsSelected" type="hidden" value="false">
<label for="5">Fee2</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="6" name="[2].IsSelected" type="checkbox" value="true"><input name="[2].IsSelected" type="hidden" value="false">
<label for="6"><b>Fii</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="7" name="[2].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="7">Fii1</label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="8" name="[2].SubsCategories[1].IsSelected" type="checkbox" value="true"><input name="[2].SubsCategories[1].IsSelected" type="hidden" value="false">
<label for="8">Fii2</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="9" name="[3].IsSelected" type="checkbox" value="true"><input name="[3].IsSelected" type="hidden" value="false">
<label for="9"><b>Foo</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="10" name="[3].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[3].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="10">Foo1</label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="11" name="[4].IsSelected" type="checkbox" value="true"><input name="[4].IsSelected" type="hidden" value="false">
<label for="11"><b>Fuu</b></label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="12" name="[5].IsSelected" type="checkbox" value="true"><input name="[5].IsSelected" type="hidden" value="false">
<label for="12"><b>Bee</b></label>
</li>
</ul>
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input id="13" name="[6].IsSelected" type="checkbox" value="true"><input name="[6].IsSelected" type="hidden" value="false">
<label for="13"><b>Bii</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input id="14" name="[6].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[6].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="14">Bii1</label>
</li>
</ul>
</form>
I'm trying to check the header and all the child checkboxes will be checked and if all the child checkboxes are being check, the parent checkbox will be checked and vice versa.
The js I'm trying to work on:
$('li :checkbox').on('click', function () {
var $chk = $(this),
$li = $chk.closest('li'),
$ul, $parent;
if ($li.has('ul')) {
$li.find(':checkbox').not(this).prop('checked', this.checked)
}
do {
$ul = $li.parent();
$parent = $ul.siblings(':checkbox');
if ($chk.is(':checked')) {
$parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
} else {
$parent.prop('checked', false)
}
$chk = $parent;
$li = $chk.closest('li');
} while ($ul.is(':not(.someclass)'));
});
UPDATE:
I made it working with the help of the answers below. Here's the working answer in fiddle. I did follow the suggestions by putting the flag whether the checkbox is parent or not. For safety, I also added child-li class so that I'll not use the bootstrap col-xs-offset-1, that might change anytime. Thank you very much!
First, (as pointed out in the comments), it's much easier if you indicate somewhere which is a parent and which is a child checkbox. In the provided code, this can sort of be implied by as it looks like the child lis have class 'col-xs-offset-1' - but this is a layout class so should not be used for semantic meaning as the layout may change.
So, with the current html, you can determine if a checkbox is the parent or not by doing:
var isparent = !$(this).closest("li").is(".col-xs-offset-1");
As stated above, we recommend not doing this - just working with what's been given. Instead you should add classes (in the example below 'parentCheckbox' and 'childCheckbox' have been added)
<ul class="col-xs-3">
<li class="checkbox checkbox-info">
<input class='parentCheckbox' id="1" name="[0].IsSelected" type="checkbox" value="true"><input name="[0].IsSelected" type="hidden" value="false">
<label for="1"><b>Faa</b></label>
</li>
<li class="checkbox checkbox-info col-xs-offset-1">
<input class='childCheckbox' id="2" name="[0].SubsCategories[0].IsSelected" type="checkbox" value="true"><input name="[0].SubsCategories[0].IsSelected" type="hidden" value="false">
<label for="2">Faa1</label>
</li>
</ul>
then use:
var isparent = $(this).is(".parentCheckbox");
(of course, you only need to add a class to the parents, but it makes it easier later to explicitly state parent/child and you could add them to the li if that makes more sense when building with MVC/Razor).
Then handle parent and child checkboxes in separate routines.
When the parent is ticked, update all checkboxes except the parent to match the parent:
var checked = chk.is(":checked");
chk.closest("ul")
.find(":checkbox")
.not(chk)
.prop('checked', checked);
When a child is ticked, check if all the child checkboxes are ticked and update the parent:
var parent = chk.closest("ul")
.find("li:not(.col-xs-offset-1)")
.find(":checkbox");
var children = chk.closest("ul")
.find("li.col-xs-offset-1")
.find(":checkbox");
if (children.filter(":checked").length == children.length)
parent.prop("checked", true);
else
parent.prop("checked", false);
Here's the above added to your html jsfiddle: http://jsfiddle.net/3xczqogy/6/
Finally, laying out html to indicate parent/child is not how html works - it might help you work out what's going on, but there are better ways to do this. (In the question code, the "child" (actually sibling) lis are indented with spaces and no other tag/node).
This works with multiple levels of nesting:
$(document).ready(function(){
$('input[type=checkbox]').on('click', function () {
var currentName = $(this).attr("name")
var parrentVal = $(this).is(":checked");
var childrenPrefix = currentName.substring( 0, currentName.lastIndexOf( "IsSelected" ) );
var childrenInputs = $('input[type=checkbox][name^="'+childrenPrefix+'"]')
childrenInputs.each(function(){
$(this).prop("checked", parrentVal);
})
var suffixIndex = currentName.lastIndexOf('.SubsCategories');
if(suffixIndex > -1)
{
var parntName = currentName.substring( 0, suffixIndex);
var siblingsAndChildren = $('input[type=checkbox][name^="'+parntName+'.SubsCategories"]')
if(siblingsAndChildren.length > 0)
{
var selectedSiblingsAndChildren = $(siblingsAndChildren).filter( ":checked" );
$('input[type=checkbox][name="'+parntName+'.IsSelected"]').prop("checked", selectedSiblingsAndChildren.length === siblingsAndChildren.length);
}
}
})
})
Working fiddle
Related
I wrote a function in javascript. It works perfectly to show and hide list items on click action. I have other 5 lists items that I want to use this function for them also. However, When I tried to generalize the function by passing parameters as IDs it did not work.
the following part of the html:
function toggle_att_menu() {
var att_list = document.getElementById("att-list");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
att_list.style.display=
((att_list.style.display!='block')?'block':'none');
plus.style.display=
((plus.style.display!='none')?'none':'inline');
minus.style.display=
((minus.style.display!='inline')?'inline':'none');
}
// what I want to do is passing parameter as following:
function toggle_att_menu(x,y,z) {
var att_list = document.getElementById(x);
var plus = document.getElementById(y);
var minus = document.getElementById(z);
att_list.style.display=
((att_list.style.display!='block')?'block':'none');
plus.style.display=
((plus.style.display!='none')?'none':'inline');
minus.style.display=
((minus.style.display!='inline')?'inline':'none');
}
//and use the function five times with different IDs each time as following:
toggle_att_menu('att-list-1','plus-1','minus-1')
toggle_att_menu('att-list-2','plus-2','minus-2')
toggle_att_menu('att-list-3','plus-3','minus-3')
toggle_att_menu('att-list-4','plus-4','minus-4')
toggle_att_menu('att-list-5','plus-5','minus-5')
<div class="title linklike">
<span id="plus-1" class="plus" >▸</span><span id="minus-1" class="minus">▾</span> <a id="linklike" onclick="toggle_att_menu()" href="#"> condition </a>
</div>
<ul id= "att-list-1" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
/>
damegaed
</label>
</li>
</ul>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-2" class="plus" >▸</span><span id="minus-2" class="minus">▾</span> <a id="link" onclick="toggle_att_menu()" href="#">condition</a>
</div>
<ul id= "att-list-2" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
/>
damaged
</label>
</li>
</ul>
</div>
any idea or solution will be highly appreciated.I am not so familiar with jQuery. so please I need help using only pure java script.
Try it like this:
https://jsfiddle.net/bertdireins/dtmdod15/6/
function toggle_att_menu(elem) {
var container = elem.parentElement.parentElement;
var att_list = container.querySelector(".att-list");
var plus = container.querySelector(".plus");
var minus = container.querySelector(".minus");
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display =((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
You first have to get the parent parent's container of your anker and then you can query the underlying elements.
Your ankers should then look like this:
<div class="title linklike">
<span id="plus" class="plus">▸</span>
<span id="minus" class="minus">▾</span>
<a id="linklike" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list" class="att-list"> ... </ul>
Please be aware the fiddle is missing the initial CSS, so it looks little weird.
Query would make life much easier here.
The reason for this is your function calls, and your element IDs. You have no elements with id "att-list-1", "att-list-2" etc. You have two elements with the same id: "att-list". Two elements should never have the same id. Switch the ids to "att-list-1", "att-list-2" and so forth, and it probably should work. The same goes for "plus-1" ... and "minus-1" ..., you have no elements with those IDs in HTML, you use the same IDs "minus" and "plus" for several elements.
You are not using unique IDs for your elements - it's better to use classes for repeated elements. Anyway, you probably want something like that:
/*
function toggle_att_menu(x,y,z) {
var att_list = document.getElementById(x);
var plus = document.getElementById(y);
var minus = document.getElementById(z);
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display = ((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
*/
function toggle_att_menu(element) {
var parent = element.parentElement.parentElement;
var att_list = parent.querySelector(".att-list");
var plus = parent.querySelector(".plus");
var minus = parent.querySelector(".minus");
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display = ((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-1" class="plus">▸</span><span id="minus-1" class="minus">▾</span><a id="link-1" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list-1" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damegaed
</label>
</li>
</ul>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-2" class="plus" >▸</span><span id="minus-2" class="minus">▾</span> <a id="link-2" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<ul id="att-list-2" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_2_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
As a general piece of advice, try:
not using the same id multiple times, because that's not how the id is supposed to work. Ids ought to be unique, otherwise, you're going to have problems with CSS and JavaScript in particular.
getting your elements by class, or some other non-unique selector, instead of id, using a function that can do that, such as getElementsByClassName orquerySelectorAll so that you can use your function just once.
using window.getComputedStyle(el).getPropertyValue as a fallback, when getting the current display to check against, in case the style is not defined yet (if you don't the first click will do nothing).
Now, regarding your problem, since you can't use jQuery, getting the elements will get kind of ugly and will depend vastly on how you position them relatively to each other. Since, you are using inline JavaScript to call your function, be sure to pass this as an argument to be able to use the link to get the required elements.
Snippet:
/* ----- JavaScript ----- */
function toggle_att_menu(a) {
var
/* Cache all desired elements. */
elements = {
att_list: a.parentElement.nextElementSibling.children[0],
plus: a.previousElementSibling.previousElementSibling,
minus: a.previousElementSibling
},
/* Store the wanted displays for each element type. */
displays = {
att_list: {from: "block", to: "none"},
plus: {from: "inline", to: "none"},
minus: {from: "none", to: "inline"}
};
/* Iterate over every property of the elements object. */
for (var type in elements) {
var
/* Cache the current element. */
element = elements[type],
/* Get the current display of the element. */
d = element.style.display ||
getComputedStyle(element, null).getPropertyValue("display");
/* Set the element's display to the appropriate one. */
element.style.display = (d != displays[type].from)
? displays[type].from
: displays[type].to;
}
}
/* ----- CSS ----- */
.plus { display: inline }
.minus { display: none }
<!----- HTML ----->
<div class="title linklike">
<span class="plus">▸</span>
<span class="minus">▾</span>
<a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<ul class="att-list">
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
<div class="title linklike">
<span class="plus">▸</span>
<span class="minus">▾</span>
<a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<ul class="att-list">
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
I have the following html and I want to set the value of the second radio button in the list to be checked. I know I can do this using the id attribute but how can I do the same
by using the class selector as below and chaining the input field to be checked?
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked
Below code may help you.
HTML
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
jQuery
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
For versions of jQuery prior to 1.6, use:
$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');
$(document).ready(function(){
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true);
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true);
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Fourth child selected:
<ul class="radio1">
<li>
<input id="1" type="radio" value="1" name="option1">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option1">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option1">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option1">
<label >four</label>
</li>
</ul>
Second child selected:
<ul class="radio2">
<li>
<input id="1" type="radio" value="1" name="option2">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option2">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option2">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option2">
<label >four</label>
</li>
</ul>
First child selected:
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option">
<label >two</label>
</li>
</ul>
First child selected:(same class name)
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option4">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option4">
<label >two</label>
</li>
</ul>
</body>
</html>
Even the use of:
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
Works apparently, it is just for a case.
It set the checked on all the radio until the last one, that it is set just because it is the last.
A more meaning solution would be to use the .last() to go directly on the radio option you want to set:
$(function(){
// Set the last checked radio
$('.myOptionList li > input[name="options"]').last().prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" checked name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
To ensure it's working properly I set the first radio checked.
But I suggest to change your code in a way that you select the radio on the value attribute.
The benefit of this is that your code will be more clear and easy to understand and change, and more if the order of radios change it will still works.
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>
I have two UL lists with some radio buttons. Now I want to get last selected radio button ID attribute form their UL.
For example:
If I selected radio button from first UL then return selected radio ID.
If I selected radio button from second UL then return seledted radio ID.
I have tried bellow code but not working properly. If you try with selecting first radio button from first UL you will get alert with selected ID, but when you selected radio button from second UL you will get alert from first UL and that I dont want. :(
I want to get last checked radio button ID from that UL.
Any idea how to do this?
Can you please check with this way:
First select 20 from first UL you will get 20.
Second select 80 from second UL you will get 80.
Now again change radio button from first UL and that changed radio ID I want.
Here is my JSFiddle.
Thanks.
$("#update_cart").click(function() {
var radioID = $("input[type='radio']:checked").attr("id");
if (radioID) {
alert(radioID);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="one">
<li>
<label for="1" class="label_check">
<input type="radio" id="1" name="one" value="10">10
</label>
</li>
<li>
<label for="2" class="label_check">
<input type="radio" id="2" name="one" value="20">20
</label>
</li>
<li>
<label for="3" class="label_check">
<input type="radio" id="3" name="one" value="30">30
</label>
</li>
<li>
<label for="4" class="label_check">
<input type="radio" id="4" name="one" value="40">40
</label>
</li>
<li>
<label for="5" class="label_check">
<input type="radio" id="5" name="one" value="50">50
</label>
</li>
</ul>
<ul class="two">
<li>
<label for="6" class="label_check">
<input type="radio" id="6" name="two" value="40">60
</label>
</li>
<li>
<label for="7" class="label_check">
<input type="radio" id="7" name="two" value="70">70
</label>
</li>
<li>
<label for="8" class="label_check">
<input type="radio" id="8" name="two" value="100">80
</label>
</li>
<li>
<label for="9" class="label_check">
<input type="radio" id="9" name="two" value="120">90
</label>
</li>
<li>
<label for="10" class="label_check">
<input type="radio" id="10" name="two" value="120">100
</label>
</li>
</ul>
<input type="button" id="update_cart" class="update_cart" value="Update Cart">
Use
$("#update_cart").click(function () {
var radioID = $("input[type='radio'].active").attr("id");
if (radioID) {
alert(radioID);
}
});
$("input[type='radio']").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
Working Demo
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)