How to control check element from jquery dropdown button - javascript

I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?

Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..

Related

Hide element on checkbox click/check, re-insert element on checkbox uncheck

Im learning Jquery so please bear with me here I would like to hide / remove a DIVs content if a checkbox is check>
When checkbox is unchecked I would like the DIVs content to re-appear,(which was hidden on checkbox checked.)
I have managed to solve part 1 of the problem, hiding the content but Im stuck on getting content re-appear.
YOU CAN VIEW MY JSFIDDLE HERE
Any help appreciated
$(function() {
$('.return_to_pickup_location').click(function() { //fire when the button is clicked
$('form input:checkbox').each(function() {
var checkbox = $(this);
if(checkbox.is(':checked'))
$('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
});
Just add show to the element in else block.
If you have single checkbox no need to have for each loop
Updated fiddle
$(function() {
$('#return_to_pickup_location').click(function() { //fire when the button is clicked
if($(this).is(':checked'))
$('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
you have done coding on only if condition try to add else condition also to get your required result like below code
$(function() {
$('.return_to_pickup_location').click(function() { //fire when the button is clicked
$('form input:checkbox').each(function() {
var checkbox = $(this);
if(checkbox.is(':checked')) $('.returnLocation').hide("slow");
else
$('.returnLocation').show("slow");
});
});
});

Uncheck a Checkbox using Jquery

I have a page with a list of check boxes, when a check box is checked I am updating the number of check boxes selected in side a p tag. This is all working.
The problem I have is when the user selects more than 5 checkboxes I want to use Jquery to unselect it.
This is what I have so far, the first if else works but the first part of the if doe
$("input").click(function () {
if ($("input:checked").size() > 5) {
this.attr('checked', false) // Unchecks it
}
else {
$("#numberOfSelectedOptions").html("Selected: " + $("input:checked").size());
}
});
Any ideas?
Firstly you should use the change event when dealing with checkboxes so that it caters for users who navigate via the keyboard only. Secondly, if the number of selected checkboxes is already 5 or greater you can stop the selection of the current checkbox by using preventDefault(). Try this:
$("input").change(function (e) {
var $inputs = $('input:checked');
if ($inputs.length > 5 && this.checked) {
this.checked = false;
e.preventDefault();
} else {
$("#numberOfSelectedOptions").html("Selected: " + $inputs.length);
}
});
Example fiddle
Note I restricted the fiddle to 2 selections so that it's easier to test.
You need this $(this).prop('checked', false);
You should be saying
$(this).attr('checked', false)
instead of
this.attr('checked', false)
You need this $(this).prop('checked', false);
Also this is a javascript object, if you want to use jquery you should prefer $(this).

Get the value from an element targeted by its name

Let me try to explain my problem. I have a radio button "jform[display]" which allow to display a hidden div "greenRect".
With the following code, it does not work.
$("input[name='jform[display]']").on('click', function() {
if ($("input[name='jform[display]']").val() == 1) {
greenRect.show();
alert("Value of the Radio Button="+$("input[name='jform[display]']").val());
return;
}
greenRect.hide();
//It does not work (always=1)!!!
alert("Value of the Radio Button="+$("input[name='jform[display]']").val());
});
The elements $("input[name='jform[display]']").val() is always == 1
If I modify $("input[name='jform[display]']").val() to $(this).val(), it works!
$("input[name='jform[display]']").on('click', function() {
if ($(this).val() == 1) {
greenRect.show();
alert("Value of the Radio Button="+$(this).val());
return;
}
greenRect.hide();
alert("Value of the Radio Button="+$(this).val());
});
Why does it work with the option2 and not with the option1. I thought that both were similar.
Here is the code with JSFIDDLE : http://jsfiddle.net/4zmqzecs/2/
Thank you very much for your help
PS:
The names of my elements are generated by an API:
name=jform[display]
id=jform_test0
id=jform_test1
They sound strange but it's difficult to modify. Anyway it souldn't be the origin of the problem.
You should rather get the value for checked radio button using :checked selector:
$("input[name='jform[display]']:checked").val()
Working Demo

Can't get Checkboxes to stop displaying a hidden Div

I have inserted some javascript to get two checkboxes in particular to display a hidden Div when they are checked and to make that Div disappear when they are unchecked. The issue I am having is that all of the other checkboxes are making the Div appear when they are checked. Now they do not fade in or fade out like the original two checkboxes are supposed to do. Instead they other checkboxes just make the hidden Div appear only. How do I prevent the other checkboxes from influencing the Div.
the page is http://asilverwareaffair.net/_NEW/request-a-quote/
the correct checkboxes are:
Wedding Reception (Ceremony is off site)
Wedding Reception (Ceremony on site)
they are located under "Type of Event" in the "Event Details" section
the Div: id="weddingselect" class="hide" is hidden but appear when any checkbox is checked. However it properly fades in and out when the correct checkboxes above are checked and unchecked. What would cause all the other checkboxes on the page to make the "weddingselect" Div become visable and how do I stop them?
Here is the JavaScript I used to make the div fade in and out with the Wedding Reception checkboxes:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#wedchk1').change(function () {
if (this.checked)
// ^
$('#weddingselect').fadeIn('slow');
else
$('#weddingselect').fadeOut('slow');
});
$('#wedchk2').change(function () {
if (this.checked)
// ^
$('#weddingselect').fadeIn('slow');
else
$('#weddingselect').fadeOut('slow');
});
});
</script>
HOWEVER: I don't think my javascript has anything to do with it because if I remove all javascript the checkboxes on the page still make the Hidden div appear when they are checked... it doesn't make sense to me.
You have the following code in your custom.js:
$('input[type="checkbox"]').change(function () {
if (this.checked) {
var chkVal = (this.value);
if(chkVal="Wedding Reception"){
$('#weddingselect').show();
//$('#weddingselect').css()
}else{
$('#weddingselect').hide();
}
}
//$('#weddingselect').hide();
});
That's why it's "working" even if you remove the mentioned script.
use $(this) not this.
thisis for native Javascript, $(this) is for jQuery.
Also use $(this).is(':checked') instead of $(this).checked..
And lastly, use {} for if else statements.
$(document).ready(function () {
$('#wedchk1').change(function () {
if ($(this).is(':checked')) {
$('#weddingselect').fadeIn('slow');
}
else {
$('#weddingselect').fadeOut('slow');
}
});
$('#wedchk2').change(function () {
if ($(this).is(':checked')) {
$('#weddingselect').fadeIn('slow');
}
else {
$('#weddingselect').fadeOut('slow');
}
});
});

jQuery checkbox click shows input field - doesn't work

I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/

Categories