Question

if I have a checkbox next to an anchor tag, how do I use jQuery to display an alert box with the anchor tags href value when the checkbox is clicked.

For example,

<div><input type="checkbox"><a href="http://link0">link 0</a></div>
<div><input type="checkbox"><a href="http://link1">link 1</a></div>
<div><input type="checkbox"><a href="http://link2">link 2</a></div>
<div><input type="checkbox"><a href="http://link3">link 3</a></div>
<div><input type="checkbox"><a href="http://link4">link 4</a></div>
<div><input type="checkbox"><a href="http://link5">link 5</a></div>
<div><input type="checkbox"><a href="http://link6">link 6</a></div>
<div><input type="checkbox"><a href="http://link7">link 7</a></div>
<div><input type="checkbox"><a href="http://link8">link 8</a></div>
<div><input type="checkbox"><a href="http://link9">link 9</a></div>

if i click on the checkbox next oto link 7, it should alert me with

http://link7

and so on.

Answer 1

Like this:

$(':checkbox').click(function() { 
    alert($(this).nextAll('a:first').attr('href'));
});

EDIT: Explanation:

• The :checkbox selector selects all checkboxes.
• $(this).nextAll('a:first') will find the first <a> element after this, even if there are other elements in between.
  By contrast, $(this).next('a') will only return the next element if it's an`; if there is something in between, it won’t return anything.