Show box or input box on checked box

Question

how can I make this work...

If I select a box it shows my input box or whatever I need to show when a box is checked ... the problem is that I have 5 check box...

so If the user select

Box 1 [x]
Box 2 [x]
Box 3 [x]
box 4 [x]
Box 5 [ ]

up to this point the code works fine... but then he/she realize that no longer want the Box 3 and want to switch 3 for 5 ... before clic the submit button

Box 1 [x]
Box 2 [x]
Box 3 [ ]
box 4 [x]
Box 5 [x]

When that happen the input box change from show to hide... and I don't want that since 1,2,4 and 5 still selected ...

If there where no one selected then sure show nothing... but as long as there is one selected then the input box or button or text or whatever is needed must be shown...

Here is the code for testing:

The HTML

  <input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_1" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_2" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_3" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_4" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_5" value="supplied" class="aboveage2" />

<ul id="date" style="display:none">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

The Java

  $('#supplied, #supplied_1, #supplied_2, #supplied_3, #supplied_4, #supplied_5').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

The link to live test: http://jsfiddle.net/GBSZ8/284/

Thank you.

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

$('.aboveage2').live('change', function() {

    if ( $(".aboveage2:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

Demo: http://jsfiddle.net/samliew/GBSZ8/295/

Note that live works only for jQuery 1.7 or lower. For migration to latest jQuery, see jQuery 1.9 .live() is not a function

UPDATE:

Your checkbox class on your website is different from the one in the question!!!

Use this selector instead:

$('input[name*=accessory_id]').live('change', function() {

    if ( $("input[name*=accessory_id]:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

edited May 23 '17 at 12:28

Community

1
1

answered Sep 05 '13 at 02:00

Samuel Liew

76,741
107
159
260

Thank you, your example, didn't work... it only change the first element and the rest nothing... but thank you... – Tanker Sep 05 '13 at 04:54
ohh my... I should pay more attention! Thank youuuuuu!!!btw, is possible to hide some parts of the html only if "noimage.jpg" image is present on the page? say you have 10 items each has images but only 3 have the "noimage.jpg" if so, then hide certain radio buttons... is that possible? – Tanker Sep 05 '13 at 05:48
Hello Samuel, I just open a new question if you care to take look: http://stackoverflow.com/questions/18629821/hide-parts-of-html-code-base-on-page-elements Thank you. – Tanker Sep 05 '13 at 07:11

score 0 · Answer 2 · answered Sep 05 '13 at 02:32

0

I changed your selector. I have limited context, but this seems to be a better choice based on your provided sample.

$('.aboveage2').bind('change', function(){
  var $inputs = $(this).siblings('input').add($(this));
  var checked = false;
  for (var i = 0; i < $inputs.length; i++) {
    var input = $inputs[i];
    checked = $(input).is(':checked');
    if (checked) break;
  }
  $('#date').toggle(checked);
});

This solution simply loops through each checkbox. If the checkbox is checked then it breaks from the loop and makes sure that $("#date") is showing. Otherwise it will hide $("#date").

http://jsfiddle.net/RV4aJ/

answered Sep 05 '13 at 02:32

mikekavouras

220
2
8

Thank you.. some what, is working.. but I need to use the ID instead of the class... but this example is working... – Tanker Sep 05 '13 at 04:53
No problem. I've updated the jsfiddle to use your original ID's. http://jsfiddle.net/RV4aJ/3/. Everything should still work. – mikekavouras Sep 05 '13 at 16:55

Show box or input box on checked box

2 Answers2

Linked

Related