jQuery same function multiple ids

Question

I'm trying to get an input box to be visible / not visible depending on whether a radio button is selected on yes or no.

I have assigned an ID to each div where the text input box is.

<tr>
    <td>Acknowledged within 30 secs</td>
    <td>
        <div class="radio"><input type="radio" value="1" name="greet"> Yes</div>
        <div class="radio"><input type="radio" value="0" name="greet"> No</div>
    </td>
</tr>
<tr>
    <td></td>
    <td>
        <div id="greet-info" class="hidden">
        <input type="text" class="textbox" placeholder="Tell us more" id="greet_more" name="greet_more">
        </div>
    </td>
</tr>


    $("input[name='greet']").change(
    function(){
        if($('input[name=greet]:checked').val()=="0"){
            $('#greet-info').removeClass("hidden");
        }else{
            $('#greet-info').addClass("hidden");
        }

    }
);
$("input[name='menu']").change(
    function(){
        if($('input[name=menu]:checked').val()=="0"){
            $('#menu-info').removeClass("hidden");
        }else{
            $('#menu-info').addClass("hidden");
        }

    }
); 
$("input[name='drinks_menu']").change(
    function(){
        if($('input[name=drinks_menu]:checked').val()=="0"){
            $('#drinks_menu-info').removeClass("hidden");
        }else{
            $('#drinks_menu-info').addClass("hidden");
        }

    }
);

Since I have a lot of questions, and they are spread across 5 pages. I will need a lot of input boxes, and therefore i'll have to re-write the function out each time. I was wondering how I could do it so I only have to write one function?

Thanks!

whether all the inputs follow the same pattern like the trs — Arun P Johny
– Arun P Johny, Commented Jan 5, 2014 at 2:01

Arun P Johny · Accepted Answer · 2014-01-05 02:04:19Z

1

If your html follows the same structure across all the elements then

$('table input[type="radio"]').change(function(){
    $(this).closest('tr').next().find('div').toggle(this.value == 1 && this.checked)
})

Demo: Fiddle

answered Jan 5, 2014 at 2:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Matt Over a year ago

Excellent, Thanks! it does follow the same structure in this instance. I had to get rid of the class="hidden" and swap it out for style="display:none"; which works fine. not sure why it wasn't happy with the class?

Matt Over a year ago

I found a CSS file that had a class also called .hidden with !important at the end, I guess it was preventing it from displaying.

Sergei Zahharenko · Accepted Answer · 2014-01-05 02:06:44Z

1

easiest would be:

function bindInput(selector, id) {
  $(selector).change(
    function(){
        if($(selector + ':checked').val()=="0"){
            $(id).removeClass("hidden");
        }else{
            $(id).addClass("hidden");
        }

    }
  );
}


bindInput("input[name='greet']",'#greet-info')
bindInput("input[name='menu']",'#menu-info')
bindInput("input[name='drinks_menu']",'#drinks_menu-info')

edited Jan 5, 2014 at 2:06

answered Jan 5, 2014 at 2:01

Sergei Zahharenko

1,52412 silver badges16 bronze badges

2 Comments

Purple Hexagon Over a year ago

This does not take into account that each input needs to trigger an event on the appropriate div ie with the same id

Sergei Zahharenko Over a year ago

yeah, fixed that little thingy :)

Collectives™ on Stack Overflow

jQuery same function multiple ids

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related