javascript if condition on checkbox functioning only once

Question

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

$('#BACSSpan, #BACS, #ChequeSpan, #Cheque').css('visibility','hidden'); off-topic but worth drawing your attention to :) — Emissary
– Emissary, Commented Aug 20, 2013 at 11:54

Igor Dymov · Accepted Answer · 2013-08-20 11:22:20Z

3

The thing is that $('#available:checked') is a jQuery object - not a bool value. To get bool value you should do:

if ($(this).is(':checked')) {
    ...
}
else {
    ...
}

answered Aug 20, 2013 at 11:22

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2013-08-20 11:51:05Z

1

If you don't want to change your code a lot, you can simply add .length.

if ($('#available:checked').length) {
    //Do Something
}

edited Aug 20, 2013 at 11:51

Alex

5,7457 gold badges39 silver badges59 bronze badges

answered Aug 20, 2013 at 11:32

Tomzan

2,81816 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript if condition on checkbox functioning only once

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related