Hoping someone could help me with a bit of jquery or javascript. I have some DIV's that contain the values of a checkbox being either "1" or "0" depending on whether I check the box or not:
<div class="checkbox">1</div> //This is when the checkbox is checked
<div class="checkbox">0</div> //This is when the checkbox is NOT checked
The class for this DIV stays the same whether it is a 0 or a 1 so I need to have a conditional statement that says,
"If the contents of the DIV is 1 then show it"
AND
"If the contents of the DIV is 0, then hide it"
Would this be simple to do?
A filter would come in handy for such case..
$('.checkbox').filter(function () {
return $(this).text() == 0;
}).hide();
I would do it differently.
$("input#checkbox").change(function(){
$("div.checkbox").toggle(this.checked);
});
Considering that your checkbox is the one that it is altering the content of the <div> anyways.
Any time a checkbox is changed, look at your divs with class checkbox and if they have 1, show, else hide.
$('input[type="checkbox"]').on('change', function() {
$('.checkbox').each(function(){
if($(this).text() === '1'){
$(this).show();
}else{
$(this).hide();
}
});
});
If i have to do it then i would love to do in this way: http://jsfiddle.net/P2WmG/
var chktxt = $.trim($('.checkbox').text());
if (chktxt == 0) {
$('#checkbox').hide();
} else {
$('#checkbox').show();
}
You can use the :contains() Selector to select the divs based on their contents.
$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();
Related
I have Checkboxes in DropDown i want to use .each() to check if One the checkBoxes with value=2 were Selected Show Div else hide it.
$("#TypeAnswerQuestionPage").change(function () {
if ($(this).val() == 2) {
$('.QuestionScoreMinMax').show(500);
}
else {
$('.QuestionScoreMinMax').hide(500);
}
});
Have a look at this fiddle link
https://jsfiddle.net/5qwsfepg/2/
In this scenario when you select the second option "Saab" a div that corresponds that choice will be shown. You can of course change and customize as needed but the basic function as follows.
$("div").hide();
$('#select_id').click(function() {
if ($("#select_id option[value=saab]:selected").length > 0) {
$(".saab-div").show();
}
});
So we first hide all the divs and then only show the one you want when the corresponding item it selected in the dropdown.
I have a form with multiple HTML checkboxes. I want to hide some dividers only if at least one checked checkbox have a custom HTML5 attribute called "terminator". Otherwise I would want to show the dividers.
I tried to accomplish this by using the change() event to check if one has the terminator attribute.
Here is what I have done.
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
//Hide all groups that have the class equal to className
if( $(this).is(':checked') ){
if( $(this).data('terminator') ){
hideControls($(this), existingElements, className);
}
} else {
showControls(existingElements, className);
}
}).change();
The function hideControls will hide the desire inputs. The function showControls will display the desired inputs if any are hidden.
My code kinda works, but has one problem that I can't figure out a solution to. The problem happens after checking a box that has the terminator attribute and checking a box that does NOT have the terminator attribute, and then "un-checking" a box that does NOT have the terminator attribute.
When first checking the box with the terminator attribute the dividers hide as expected.
Then when un-checking a box that does not have a terminator attribute it shows dividers that should be hidden with appear since I still have 1 checked box with the terminator attribute.
How can I fix this problem?
I created this jFiddle to show the code and the problem in action. You can re-create the problem by jumping into the "1:b) More Questions" section on the jFiddle, then check the "Red" box and then the "Green - Terminator" box, and finally unchecking the "Red" box. You will see how the dividers below will appear where they should be hidden since "Green - terminator" is still checked"
You should be checking for the "checked" status of the checkbox with data-terminator attribute set on each change.
Something like
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
var isTerminatorChecked = $("input:checkbox[data-terminator='Yes']").is(":checked");
//Hide all groups that have the class equal to className
if (isTerminatorChecked) {
hideControls($(this), existingElements, className);
} else {
showControls(existingElements, className);
}
});
Updated fiddle
To make sure that showControls will only get invoked when the checkbox with the data-terminator attribute gets unchecked,
change this :
...
} else {
showControls(existingElements, className);
}
to
...
} else if ($(this).is("[data-terminator]")) {
showControls(existingElements, className);
}
Updated jsFiddle: http://jsfiddle.net/8yf0v3xt/10/
the code below said 'If any input that have the type checkbox is changing'
$("input[type='checkbox']").change(function(e) { /*hide*/ }
else { /*show*/}
when you uncheck the "red" checkbox this="red", and red is not checked so... it automatically go to the else statment which in to show divider
I build a UI interface that show messages and after confirming them they become :"display=none", now i want to check if all the elements are been confirm meaning all hidden. so that my interface wont start.
This is the code:
this is visible:
<li id="announcement4" class="announcement"></li>
this is not visible:
<li id="announcement4" class="announcement" style="display: none"></li>
can i check via the class or type? like
if(all elements type li are hidden)
if(all elements class announcement are hidden)
what is a good way of doing this?
Thanks
Simply use is(':visible')
var allLiHidden = !$('li').is(':visible');
var allClassHidden = !$('.announcement').is(':visible')
FIDDLE
you can do like this:
if($('ul#SomeId').children(':visible').length == 0) {
// all are hidden
}
or:
if($('li.announcement:visible').length == 0) {
// all are hidden
}
Fiddle Example
if($('.announcement:visible').length>0)
{
//something is visible
}
For such a query, you can use the jQuery :visible selector, which gives you only visible elements (everything that Consumes space in the layout) As return.
If you then compare the amount of visible elements with the invisible, you'll see whether one is not visible.
if( $('.announcement').length === $('.announcement:visible').length ){
//all visible
} else{
//not all visible
}
Or
if( $('li').length === $('li:visible').length ){
//all visible
} else{
//not all visible
}
I'm helping my friend Michaela out for our web design class. She did the HTML, and I've changed just a few of the lines and added some divs. She wants it so if the user clicks on a radio button then the corresponding div is shown. All div's for her form start out hidden in a class "hidden_destiny". -- This going to be a series of nested div's and I may need to change the layout later.
Here's the JsFiddle.
Here's my javascript:
if ($('#radio_starwars').is(':checked')){
$('#clicked_starwars').hide().slideDown('slow');
$('.hidden_destiny').not('#clicked_starwars').hide().slideUp('slow');
}
else if ($('#radio_avengers').attr('checked', 'true')){}
else if ($('#radio_batman').attr('checked', 'true')){}
else if ($('#radio_xmen').attr('checked', 'true')){}
else if ($('#radio_harryp').attr('checked', 'true')){}
else if ($('#radio_lotr').attr('checked', 'true')){}
[EDIT] Updated code. Add id identifier to code and updated JsFiddle link.
Try this code:
$(":radio").change(function(){
$(".hidden_destiny").hide()//hide divs
$("#clicked_"+this.id.replace("radio_","")).show()//show div by radio id
})
http://jsfiddle.net/YZ9fh/
$('.fate').click(function () {
$('.hidden_destiny').each(function () {
if ($(this).is(':visible')) {
$(this).slideUp('slow');
}
});
var id = $(this).val();
$('#clicked_' + id).slideDown('slow');
});
jsfiddle
I've got a list of items which can be expanded/collapsed individually or all at once with an Expand All/Collapse All button.
All the items start collapsed, but if you manually expand item so that every item is expanded, the 'Expand All' button should change to 'Collapse All'. Similarly if you collapse all the items it should change to 'Expand All'.
So every time you click on an individual line, it should check to see if ALL the items have now been collapsed/expanded, and if so, update the Expand/Collapse All button.
My problem is that I'm not sure how to iterate over all the items on a click to see if they are collapsed or not and properly update.
Here is a JSFiddle for this: JSFiddle
Here is my current code:
var expand = true;
jQuery.noConflict();
jQuery(function() {
jQuery('[id^=parentrow]')
.attr("title", "Click to expand/collapse")
.click(function() {
jQuery(this).siblings('#childrow-' + this.id).toggle();
jQuery(this).toggleClass("expanded collapsed");
ExpandCollapseCheck();
});
jQuery('[id^=parentrow]').each(function() {
jQuery(this).siblings('#childrow-' + this.id).hide();
if (jQuery(this).siblings('#childrow-' + this.id).length == 0)
jQuery(this).find('.expand-collapse-control').text('\u00A0');
});
jQuery('#childrow-' + this.id).hide("slide", { direction: "up" }, 1000).children('td');
});
function CollapseItems() {
jQuery('[id^=parentrow]').each(function() {
jQuery(this).siblings('#childrow-' + this.id).hide();
if (!jQuery(this).hasClass('expanded collapsed'))
jQuery(this).addClass("expanded collapsed");
});
}
function ExpandItems() {
jQuery('[id^=parentrow]').each(function() {
jQuery(this).siblings('#childrow-' + this.id).show();
if (jQuery(this).hasClass('expanded collapsed'))
jQuery(this).removeClass("expanded collapsed");
});
}
function ExpandCollapseChildren() {
if (!expand) {
CollapseItems();
jQuery('.expander').html('Expand All');
}
else {
ExpandItems();
jQuery('.expander').html('Collapse All');
}
expand = !expand;
return false;
}
function ExpandCollapseCheck() {
if ((jQuery('[id^=parentrow]').hasClass('expanded collapsed')) && (expand)) {
jQuery('.expander').html('Expand All');
CollapseItems();
expand = !expand;
}
else if ((!jQuery('[id^=parentrow]').hasClass('expanded collapsed')) && (!expand)) {
jQuery('.expander').html('Collapse All');
ExpandItems();
expand = !expand;
}
}
A couple of things I see with your code.
It seems that you may have multiple children with the same ID, such as #childrow-parent0. This is not legal HTML, and can lead to problems with JavaScript. Use classes instead.
Manipulating ID's to find children is more difficult than using built-in jQuery selectors to find children. I realize that in this case, they are siblings rather than true children, but you can still use .nextUntil(".parent") to find all of the "children" of a parent.
Use your click handlers to do the expanding/collapsing instead of repeating code. One you have a click handler, you can call .click() on a parent, and it will toggle as if you clicked it.
If half of your elements are collapsed, do you want "Expand All" or "Collapse All"? You might want both.
With all of that in mind, I wrote your code with a lot less lines. To answer your specific question, I just compared the number of '.parent.expanded' elements to the number of '.parent' elements to see if they were all expanded or not. (I changed to using a single .parent class.)
Demo
The relevant code to your question:
$('#expand_all').toggleClass("disabled", $('.parent.expanded').length == $('.parent').length);
$('#collapse_all').toggleClass("disabled", $('.parent.collapsed').length == $('.parent').length);
This uses toggleClass(), with the second argument returning true/false depending on the number of collapsed/expanded parents. This is used by toggleClass to determine whether the disabled class is applied.
Don't bother iterating, just use a selector to get a count of all the elements & their classes:
var $all = jQuery('selector to return all lines');
if($all.length == $all.filter('.collapsed').length)
//all the rows are collapsed
if($all.end().length == $all.filter('.expanded').length)
//all the rows are expanded