Develop Reference

If Toggle() class hidden uncheck the radio button if toggle class visible check the radio button

I am not good at Jquery but trying to fix something, I have a toggle function showing the div on checking a checkbox and hide the div on un-checking the checkbox, in the div I have radio button value LEFT, WHOLE, RIGHT. What Im trying to do is when someone check the checkbox it toggle the div and "WHOLE" option should select by default from radio box and this option deselect when toggle is hidden.
I have below code
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
$("input:radio[value='whole']").attr('checked',true);
});});
Problem is when toggle show the div it check the WHOLE in button but it effect on all other hidden divs. I want to select WHOLE only for that div which is toggled and rest are remain unchecked.
I have searched the whole internet but not found anything, again I am not Jquery expert I am internee.
http://dhowcruisemarina.com/pizza/product/build-your-own-pizza/ here once you check the Olives from the option "VEGGIES & GOOD STUFF " all its options (radio buttons) will toggle and I want to check WHOLE only for olives. In my case all other hidden divs options are selected as WHOLE and shows in the Checkout Page.

You need to target the specific radio button.
$("input:radio[value='whole']") This targets every radio input with a value of 'whole'
I can't give the exact answer without seeing your HTML but basically you need to target the radio button with a value of whole in the specific div only like this
$("#divId > input:radio[value='whole']")
https://api.jquery.com/child-selector/

how to toggle one button and one button only in jquery

I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.

The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});

Radio Type Toggle button issue

I have three custom buttons and they works like a radio.
I wanted to add something extra in this but I am not figuring out how .
There are three buttons currently (can be more) I can select only one . If I select any one color of the button will change and will show as it is active. I am wanting if I again click on this selected button this will unselect.
It should stay as a radio type but on addition I am wanting above requirement.
HERE is my JS fiddle DEMO
JS
$('.toggleButtonRadio').click(function(){
$('.toggleButtonRadio').removeClass("active");
$(this).toggleClass("active");
});

The problem is that you remove the active class before the toggle, so it doesn't remove it, you can change your code to this:
$('.toggleButtonRadio').click(function(){
$(this).toggleClass("active");
$('.toggleButtonRadio').not(this).removeClass("active");
});
JSFiddle Demo

Dropdown Check List Radio Unselect

I use this very nice plugin in my project called jQuery Dropdown Check List (https://code.google.com/p/dropdown-check-list/) specifically one of example which is named: 'Single select with radio buttons instead of checkboxes'.
One big problem with this example is that I am not able to (I was trying to do this by jQuery) set radio button unchecked. I was using for example:
$("input:radio").attr("checked", false);
Or
$("input:radio").removeAttr("checked");
And unfortunately nothing. Can anyone give some advice how fix this thing?

Try this:
- For check:
$("input:checkbox").attr("checked", "checked");
or
$("input:checkbox").prop('checked', true);
-For uncheck:
$("input:checkbox").removeAttr("checked");
or
$("input:checkbox").prop('checked', false);

I tried both methods in the demo page(http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html) for the "Single select with radio buttons instead of checkboxes", and turns out to be fine: the selected radio button has removed. However, the value stays in the span because remove selected radio cannot remove selected value.
My suggestion is that after you uncheck the radio, also set a html space to the span, it removes the selected value and also keep the height of its container.

This plugin uses checkbox not radio inputs so you must use $('input:checkbox') or $('input[type="checkbox"]') as your selector!
Click here to see a demo!

Previous and next buttons - expand hidden panel

I have a form which consists of multiple panels. Each panel is collapsed (display:none) until the user touches the caption/bar to uncollapse it, except the first. So my problem is when I get to the last input on my expanded form I can't focus on the next input element(with the next button on iOS) because it's not displayed. Im thinking a invisible element after the last element on my form, that when it gains focus it expands the collapsed panel underneeth. Hope that makes sense.
Regards.

Thanks guys but I figured it out. I used an input at the last element in the form to detect focus and collapse the next panel. Like done here http://www.webdeveloper.com/forum/showthread.php?t=130036
Tnks