PDA

View Full Version : Resolved switching <radio> stations



traq
02-17-2011, 06:11 AM
Hi,

I've got a form where a user will enter their business hours. There are basically two forms: one for M-F schedules, and one for daily schedules. I'm using jQuery switching back and forth between them.

Problem: I've got radio buttons to indicate which schedule to use (so I know which values to ignore, in case they fill out parts of both sections), and I'm trying to get them to toggle back and forth when I switch views.

Here's a demo page (http://www.custom-anything.com/sand/radios.html) (code attached below). I can get them to switch the first time, but not again. Any help is appreciated!

<p id="timebox1">
<label for="hours" class="dot wide ln1">
Hours of Operation:<br>

<span class="note"><input name="schedule" value="week" class="jshide jsswitch" checked="checked" type="radio"> Weekdays/Weekends<br>
</label>

<input class="time" name="wMF[open]" value="" type="text"> <span class="note">until</span>
<input class="time" name="wMF[close]" value="" type="text"> Monday-Friday<br>
<input class="time" name="wSA[open]" value="" type="text"> <span class="note">until</span>
<input class="time" name="wSA[close]" value="" type="text"> Saturday<br>
<input class="time" name="wSU[open]" type="text"> <span class="note">until</span>
<input class="time" name="wSU[close]" type="text"> Sunday<br>
</p><p>
-OR- <span class="jsshow" id="timetag1">switch to daily schedule</span><span class="jsshow" id="timetag2">switch to weekday/weekend schedule</span>
</p><p id="timebox2">
<label for="hours" class="dot wide ln1">
Hours of Operation:<br><span class="note"><input name="schedule" value="daily" class="jshide jsswitch" type="radio"> Daily<br>
</label>
<input class="time" name="dM[open]" type="text"> <span class="note">until</span>
<input class="time" name="dM[close]" type="text"> Monday<br>
<input class="time" name="dT[open]" type="text"> <span class="note">until</span>
<input class="time" name="dT[close]" type="text"> Tuesday<br>
<input class="time" name="dW[open]" type="text"> <span class="note">until</span>
<input class="time" name="dW[close]" type="text"> Wednesday<br>
<input class="time" name="dH[open]" type="text"> <span class="note">until</span>
<input class="time" name="dH[close]" type="text"> Thursday<br>
<input class="time" name="dF[open]" type="text"> <span class="note">until</span>
<input class="time" name="dF[close]" type="text"> Friday<br>
<input class="time" name="dSA[open]" value="" type="text"> <span class="note">until</span>
<input class="time" name="dSA[close]" value="" type="text"> Saturday<br>
<input class="time" name="dSU[open]" type="text"> <span class="note">until</span>
<input class="time" name="dSU[close]" type="text"> Sunday<br>
</p>
<script>
$("#timebox2").hide(); $("#timetag1").show();
$(".jsshow").click(function(){
$("#timebox1, #timebox2, #timetag1, #timetag2").toggle("fast");
$(".jsswitch").each(function(){
if( $(this).attr("checked") ){ $(this).attr("checked","false"); }else{ $(this).attr("checked","checked"); }
});
});
</script>

traq
02-18-2011, 11:53 PM
I do believe I'm getting the hang of this... :D

$(".jsswitch").not(":checked").attr("checked","checked");