Develop Reference

JavaScript.JQuery toggle and fade in

If you have one div with two radio buttons with no ids and each one disables content and displays new content if selected. Should be simple but its not working properly. When the radio button is changed, toggle off that content and fade in the new content and vice versa.
What is wrong with this code? Is it not this simple?
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" />
Projects <input name="change" type="radio" value="2" />
</div>
$(":radio").change( function(e) {
$(".radios__home").toggle().fadeIn(400);
$(".radios__projects").toggle().fadeIn(400);});

Your issue is that .fadeIn always makes the element visible, regardless of what you do with .toggle. So you need to check the value of the checked radio and use that to fade in/hide the appropriate element. Something like this (but hopefully a bit prettier):
$(":radio").change(function(e) {
if ($(this).val() == 1) {
$(".radios__home").fadeIn(400);
$(".radios__projects").hide();
} else {
$(".radios__home").hide();
$(".radios__projects").fadeIn(400);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
</div>
<div class="radios__home" style="display:block">Home Radio</div>
<div class="radios__projects" style="display:none">Projects Radio</div>
</div>

How to find which radio Button is selected after a div

How can I find which radio button is selected after a precise div?
This is an Example:
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?
Thanks in advance.

If there is just bunch of radio button you would like to check are checked or not you can do something like this
$(document).ready(function(){
$('.delete').on('click', function(){
$(document).find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:
$(document).ready(function(){
$('.delete').on('click', function(){
var $parent = $(this).parents('.largelines');
$parent.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
There is bunch of other ways to do that, another one is using next() or siblings() function:
$(document).ready(function(){
$('.delete').on('click', function(){
var $fieldset= $(this).next('fieldset');
//var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
$fieldset.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});

This find only checked radio under .largelines scope of clicked .delete element.
$(function () {
$(document).on('click', '.delete', function () {
var isChecked = $('input:radio:checked', $(this).parent()).length > 0
alert(isChecked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
Check 1
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
<hr>
<div class="largelines">
<p class="line">OPTION 2</p>
<div class="delete">
Check 2
</div>
<fieldset>
<input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>

Copy State of Groups of Checkboxes based on another Checkbox

I have a form that has repeating demographic info in 5 separate sections. I want to copy all the demographic info from one section to another if the user clicks yes on a radio and then selects the appropriate section to copy the info from.
I've got this working with text inputs without issue however it fails completely with check boxes. I managed to create a working demo of what I'd like in jsfiddle however the checkbox portion does not work on my form so I was wondering if anyone had any other suggestions.
The demographic info sections mirror each other 100% but it is possible someone would want to put different demographic info in different sections, hence why we're not just duplicating or cloning the input.
<div id="toolSet1">
<h3>
Tool Set 1 (complete all fields then select 'Yes' radio)
</h3>
Name:
<input type="text" name="name1" id="name1">
<br>
<input type="checkbox" name="race1" id="race1">Check this box!
<br>
<input type="textarea" class="textBlock1" name="textBlock1" id="textBlock1">
</div>
<br>
<br>
Will the demographic information for this tool set be identical to another tool set you have already completed?
<input type="radio" name="demoInfoSame" value="yes">Yes
<input type="radio" name="demoInfoSame" value="no">No
<br>
<br>
<div class="hidden" name="toolList" id="toolList">
From which tool set would you like to copy demographic information?
<ul class="toolSetList">
<li>
<input type="checkbox" class="toolSet" id="patStudyEstimate" disabled>Patient Study Estimate (check this one)</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Registry</li>
<li>
<input type="checkbox" class="toolSet" disabled>Electronic Data Capture</li>
<li>
<input type="checkbox" class="toolSet" disabled>Data Extraction</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Recruitment</li>
</ul>
</div>
<div id="toolSet2">
<h3>
Tool Set 2
</h3>
Name2:
<input type="text" class="name2" name="name2">
<br>
<input type="checkbox" class="race2" name="race2" id="race2">
<br>
<input type="textarea" class="textBlock2" name="textBlock2" id="textBlock2">
</div>
<br>
<div class="hidden" name="finalStep" id="finalStep">
<h2>
Now click 'No' radio button.
</h2>
</div>
//Reveal Section and Enable Inputs/Hide Section, Clear Fields, Disable Inputs
$(document).ready(function() {
$('input[type=radio][name=demoInfoSame]').change(function() {
if (this.value == 'yes') {
$('#toolList').fadeIn('slow').find('input').prop('disabled', false);
} else if (this.value == 'no') {
$('#finalStep').fadeOut('slow')
$('#toolList').fadeOut('slow').find('input').prop('disabled', true);
$('#toolList').find('input:checkbox').prop('checked',false).end();
$('#toolSet2').find('input.name2').val('').end();
$('#toolSet2').find('input.textBlock2').val('').end();
$('#toolSet2').find('input:checkbox').prop('checked',false).end();
}
});
});
//Autofill Form Based on Checkbox State
var myInput = $('#name1');
var copyTextArea = $('#textBlock1');
$(document).ready(function() {
$('#patStudyEstimate').change(function() {
if (this.checked)
$('#toolSet2').find('input.name2').val(myInput.val());
$('#toolSet2').find('input.textBlock2').val(copyTextArea.val());
$('#finalStep').fadeIn('slow');
$( '#toolSet2' ).children( 'input:checkbox' ).each( function( i ) {
var toolSet1Checks = $('#toolSet1' ).children( 'input:checkbox' ).eq( i ).prop( 'checked' );
if ( toolSet1Checks )
{
$( this ).prop( 'checked', true );
}
else
{
$( this ).removeProp( 'checked' );
}
});
});
});
Working JSFiddle: https://jsfiddle.net/nephandys/2rh5v8fj/

The most important thing I think you should know, is that we can't
trigger/handle events from the elements appended to the
DOM/body
So Instead of using this:
$('input[type=radio][name=demoInfoSame]')
We'll use this:
$(document).on("change","input[type='radio'][name*='demoInfoSame']",function(){});
to Handle clicks coming from any Yes/No radio button
Here I come to you with a new solution that create iteratively your demographic sections, using input, checkbox & radio button:
var counter=2;
$(function(){
$(document).on("change","input[type='radio'][name*='demoInfoSame']",function() {
if (this.value == 'yes') {
$(this).find('~ div[id*="toolList"]:first').fadeIn('slow').find('input').prop('disabled', false);
} else if (this.value == 'no') {
$(this).find('~ div[id*="toolList"]:first').fadeOut('slow').find('input').prop('disabled', false);
$(this).find('~ div[id*="toolList"]:first').find('input').prop('checked',false).end();
}
});
$(document).on("click",".toolSetList input[type='checkbox']",function () {
if(this.checked) {
/*************** First Part 'ToolSet' Div ***************/
//Here we Copy the content of the first toolSet div to the new toolSet div
var idDiv1='toolSet'+counter;
$("body").append("<div id="+idDiv1+"></div>");
var prevDiv='#toolSet'+(counter-1);
$('#'+idDiv1).append($(prevDiv).html());
$('#'+idDiv1+" h3").text($(this).parent().text());
//Now we Handle the id's name & content of the elements of the first toolSet
$('#'+idDiv1+" input[id*='name']").attr('id',('name'+counter));
$('#'+idDiv1+" input[id*='name']").attr('name',('name'+counter));
$('#'+idDiv1+" input[id*='name']").val($(prevDiv+" input[id*='name']").val());
$('#'+idDiv1+" input[id*='race']").attr('id',('race'+counter));
$('#'+idDiv1+" input[id*='race']").attr('name',('race'+counter));
$('#'+idDiv1+" input[id*='textBlock']").attr('id',('textBlock'+counter));
$('#'+idDiv1+" input[id*='textBlock']").attr('name',('textBlock'+counter));
$('#'+idDiv1+" input[id*='textBlock']").val($(prevDiv+" input[id*='textBlock']").val());
/************************** # ***************************/
/*************** Second Part 'Text' & 'Inputs' between the Divs ***************/
$("body").append("<br>\n" +
"<br> Will the demographic information for this tool set be identical to another tool set you have already completed?\n" +
"<input type=\"radio\" name="+("demoInfoSame"+counter)+" value=\"yes\">Yes\n" +
"<input type=\"radio\" name="+("demoInfoSame"+counter)+" value=\"no\">No\n" +
"<br>\n" +
"<br>");
/************************************ # *************************************/
/*************** Third & Final Part The group of "Checkbox" ***************/
var idDiv2='toolList'+counter;
$("body").append("<div class=\"hidden\" name="+idDiv2+" id="+idDiv2+"></div><hr>");
var prevDiv2='#toolList'+(counter-1);
$('#'+idDiv2).append($(prevDiv2).html());
/************************************ # *************************************/
counter++;
}
});
});
.hidden {
display: none;
}
.toolSetList {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toolSet1">
<h3>
Tool Set 1 (complete all fields then select 'Yes' radio)
</h3>
Name:
<input type="text" name="name1" id="name1">
<br>
<input type="checkbox" name="race1" id="race1">Check this box!
<br>
<input type="textarea" class="textBlock1" name="textBlock1" id="textBlock1">
</div>
<br>
<br>
Will the demographic information for this tool set be identical to another tool set you have already completed?
<input type="radio" name="demoInfoSame" value="yes">Yes
<input type="radio" name="demoInfoSame" value="no">No
<br>
<br>
<div class="hidden" name="toolList1" id="toolList1">
From which tool set would you like to copy demographic information?
<ul class="toolSetList">
<li>
<input type="checkbox" class="toolSet" disabled>Patient Study Estimate (check this one)</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Registry</li>
<li>
<input type="checkbox" class="toolSet" disabled>Electronic Data Capture</li>
<li>
<input type="checkbox" class="toolSet" disabled>Data Extraction</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Recruitment</li>
</ul>
</div>
<hr>
The Javascript Code is Commented in such a way you can understand what
I did, And I still open for more questions
Best Regards !

How to limit the checked checkboxes to just one at a time?

I am trying to create a filter using checkboxes. I need to only have one checkbox checked at a time. How do I do this?
Scenario: The page has a catalog of watches. The user wants to filter the watches according to for men or for women
Here is my code:
$("#filter-options :checkbox").click(function()
{
$(".collection-wrapper .strap-wrapper").hide();
$("#filter-options :checkbox:checked").each(function()
{
$("." + $(this).val()).fadeIn();
});
if($('#filter-options :checkbox').filter(':checked').length < 1)
{
$(".collection-wrapper .strap-wrapper").fadeIn();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Filter Items</h3>
<ul id="filter-options">
<li><input type="checkbox" value="filter_man" data-filter_id="man"> Man</li>
<li><input type="checkbox" value="filter_woman" data-filter_id="woman"> Woman</li>
</ul>
<div class="collection-wrapper">
<div class="strap-wrapper filter_man">
<h2>man</h2>
<p></p>
</div>
<div class="strap-wrapper filter_woman">
<h2>woman</h2>
<p></p>
</div>
<div class="strap-wrapper filter_man filter_woman">
<h2>man / woman</h2>
<p></p>
</div>
<div class="strap-wrapper filter_woman">
<h2>woman</h2>
<p></p>
</div>
</div>
Thanks in advance!

Checkboxes are used for selecting multiple values of choices. What you need is Radio Buttons. They are used exactly for this purpose. One can select only one radio button at a time. So replace your code with:
<ul id="filter-options">
<li><input type="radio" name="filter" value="filter_man" data-filter_id="man"> Man</li>
<li><input type="radio" name="filter" value="filter_woman" data-filter_id="woman"> Woman</li>
</ul>
See an example here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

Radio buttons are what you are looking for ;)
take at look at these links:
jQuery api demo
Fiddle example
HTML:
<form id="myForm">
<input type="radio" name="myRadio" value="1" /> 1 <br />
<input type="radio" name="myRadio" value="2" /> 2 <br />
<input type="radio" name="myRadio" value="3" /> 3 <br />
</form>
JS
$('#myForm input').on('change', function() {
alert($('input[name="myRadio"]:checked', '#myForm').val());
});

You could use radio buttons or you could do something like:
$('input[type=checkbox]').change(function(){
if ($('input[type=checkbox]:checked').length > 1) {
this.checked = false;
}
})

You could just use radio buttons, but if you want to do it with checkboxes, solution is pretty simple.
When you click on one of the checkboxes, select all the checkboxes and remove "checked" state, and then just add checked on clicked checkbox
Something like this:
// On checkbox click
$("#filter-options input[type=checkbox]").click(function(event) {
// Uncheck all checkboxes
$("#filter-options input[type=checkbox]").prop("checked", false);
// Check that one that you clicked
$(this).prop("checked", true)
});

Jquery how to check checkbox on div click, change class and show div

I am trying to checkbox when the div.menuitem is clicked and then it should change class and show the content in the div with class of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.
Want I want to do:
Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)
When the menuitem is pressed the checkbox should be checked
When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)
And the checkbox should be uncheched
Illustration of my menu form:
<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1
1.2 Company 1.2
</div>
<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1
1.2 Company 2.2
</div>
My previous Jquery code, which only is trigger when the checkbox is clicked. I want pretty
similar function to this, the checkbox should also be trigghed when the div is clicked:
$('.menuitem input:checkbox').change(function(){
if($(this).is(':checked')) {
$('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
});
});
My Jquery so far(not working):
$('.menuitem').click(function(e){
$(this).addClass('menuclicked');
$('div.hidediv').addClass('clicked').show(200);
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200);
});
My HTML:
<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>

I can help. I think you are structuring this wrong. You have three fields in your html, with the third being hidden. I assume when you fill in the first one you want nothing to happen, but clicking the second one should show the third field?
Try this:
//Use toggle instead of .click()
$('.menuitem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
This will effect all divs with the "menuitem" class, meaning when you click on any of the three it will toggle showing/hiding the div with the "hidediv" class.
edit you have a couple valid answers here, but I think you're approaching this wrong. If you go try the jsfiddle posted by another user, whos' javascript does the same as mine - it reveals the problem I talked about above. You cannot select all three boxes without some clever clicking. Each click will toggle showing/hiding the third check box. Might I suggest modifying your code like so:
//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
<form accept-charset="UTF-8" action="/" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" />
<input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem toggleMenuItem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" />
<input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" />
<input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
This will make it so only clicking the checkboxes with the class ".toggleMenuItem" will show the third checkbox.

try something like this:
$('.menuitem').click(function(e){
if($(this).hasClass('menuClicked')){
// Already clicked
$(this)
.removeClass('menuclicked')
.html("");
}else{
// First click
$(this)
.addClass('menuclicked');
.html($('#hidediv').html());
}
})

This may do what you're looking for:
$('.menuitem').click(function(e){
$(this).toggleClass('clicked');
$('div.hidediv').toggle(200);
});
Let me know if it is missing a feature.
http://jsfiddle.net/citizenconn/2bCdR/