javascript - 带有复选框和 anchor 标记的 jquery

Question

如果我在 anchor 标记旁边有一个复选框，我如何使用 jQuery 在单击该复选框时显示带有 anchor 标记 href 值的警告框。

例如，

<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>

如果我点击 oto 链接 7 旁边的复选框，它应该提醒我

http://link7

等等。

Answer 1

像这样:

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

编辑:解释:

• :checkbox selector选中所有复选框。
• $(this).nextAll('a:first')会找到第一个 <a> this 之后的元素，即使中间还有其他元素。
  相比之下，$(this).next('a') will only return the next element if it's an `;如果介于两者之间，则不会返回任何内容。