I am fairly new to javascript programming and just can't seem to get this right even after going through the questions here, basically i have a checkbox which displays two radio buttons only when it is unselected
<span><strong>Not Available</strong></span>
<input type="checkbox" placeHolder="" id="available" style="" name="available" required value="Yes"/>
<span style=" visibility: hidden; " id="BACSSpan">BACS</span><input type="radio" id="BACS" name="paymentSpecified" value="BACS" style="visibility: hidden;">
<span style="visibility: hidden;" id="ChequeSpan">Cheque</span> <input type="radio" id="Cheque" name="paymentSpecified" value="Cheque" style=visibility: hidden;">
I have used the following javascript:
$('body').on('click', '#available', function ()
{
if ($('#available:checked'))
{
$('#BACSSpan').css('visibility','hidden');
$('#BACS').css('visibility','hidden');
$('#ChequeSpan').css('visibility','hidden');
$('#Cheque').css('visibility','hidden');
} else
{
$('#BACSSpan').css('visibility','visible');
$('#BACS').css('visibility','visible');
$('#ChequeSpan').css('visibility','visible');
$('#Cheque').css('visibility','visible');
}
})
What it should do is alternate between showing the two radio buttons, but it is not doing anything, but when i reverse the order of the condition i.e opposite of what i want; then the required functionality happens once only