带有复选框和锚标签的jquery

osh*_*nen 1 html javascript jquery jquery-ui

如果我在锚标记旁边有一个复选框,当单击复选框时,如何使用jQuery显示带有锚标记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>
Run Code Online (Sandbox Code Playgroud)

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

http://link7
Run Code Online (Sandbox Code Playgroud)

等等.

SLa*_*aks 5

像这样:

$(':checkbox').click(function() { 
    alert($(this).nextAll('a:first').attr('href'));
});
Run Code Online (Sandbox Code Playgroud)

编辑:说明:

  • :checkbox选择器选择所有复选框.
  • $(this).nextAll('a:first')将找到之后的第一个<a>元素this,即使其间有其他元素.
    相比之下,$(this).next('a') will only return the next element if it's an`; 如果介于两者之间,它就不会返回任何东西.