I have a page that's created dynamically. It can have a number of different radio buttons with ID's like so:
<input type="radio" id="cc-radio-opt-0" />
<input type="radio" id="cc-radio-opt-1" />
<input type="radio" id="gc-radio-opt-0" />
<input type="radio" id="gc-radio-opt-1" />
In order to write change functions, I'm doing something like this:
$('[id^=cc-radio-opt-]').live("change", function() {
var idx = $(this).attr('id').split('-').pop();
});
This works well. But now, inside that change function, I need to hide a bunch of other related fields. They are named like this:
<input type="text" id="cc-number-0" />
<input type="text" id="cc-month-0" />
<input type="text" id="gc-number-0" />
<input type="text" id="gc-month-0" />
<input type="text" id="cc-number-1" />
<input type="text" id="cc-month-1" />
<input type="text" id="gc-number-1" />
<input type="text" id="gc-month-1" />
I need to be able to grab all the fields whose IDs begin with "cc" and end with the same number as the radio button that's been clicked (determined by the idx
variable. I know I can get all the fields that start with "cc" by doing this:
$('[id^=cc-]');
But how can I also indicate that they need to end with whatever idx
is? In other words, if the cc-radio-opt-1
radio is clicked, how can I get only cc-number-1
and cc-month-1
?