Question

This is my first post and I my first experience with jquery.

I have rendered and created 2 text boxes and 4 check boxes.

each text area has 2 check boxes

How do I create a relationship between these.. so when I am getting the textarea ( which has an id ) I also get the 2 ids for the other two check boxes (I have passed ids for those too) if they are checked.

Thank you.

I hope it makes sense.

There are 2 of the following same

Answer 1

It’s best to let them have something in common, which you can use to identify a group of elements. There are 2 ways I can come up with right now:

1. Giving each element the same class after their normal class. for example, class="checkBox1 one" for the checkbox and class="textArea one" for the text area.

2. Putting them in the same container, in this case a <div> might be best.

If you use the second one which I prefer you can easily make events that will apply to every one of them:

HTML:

<div id="container1" class="container">
 <input class="checkBox1" type="checkbox"/>
 <input class="checkBox2" type="checkbox"/>
 <input type="textarea"/>
</div>

jQuery:

$('.container *').click(function(){
    alert('clicking on an element inside ' + $(this).parent().attr('id'));
});

Which will result in “clicking on an element inside container1”.

Other example is if you want to empty the <textarea> when a checkbox is clicked:

$('.container checkbox').click(function(){
   $(this).siblings('textarea').val("");
});