Question

如果我在锚标记旁边有一个复选框，当单击该复选框时，如何使用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>

如果我点击链接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`;如果介于两者之间，则不会返回任何内容。

Answer 2

你已经得到了很多好的答案，但我会这样做：

$("input:checkbox").click(function(){
    alert($(this).next()[0].href);
});

单独使用:checkbox选择器与执行与*:checkbox相同的*:[type="checkbox"]相同，并且您不希望检查所有元素的类型属性DOM。

此外，由于jQuery完全是关于写的更多，，我建议尽可能多地使用本机方法来获取属性，这意味着更少的代码并且更快一点（但那是真的可以理解。）

如果anchor元素是复选框的直接兄弟，请使用.next()[0]。否则，您使用.nextAll("a:first")[0]。

Answer 3

首先在复选框中添加一个类，如下所示：

<input class="chkbox" type="checkbox"/>

然后你可以这样做：

  $(".chkbox").click(function(){
       alert($(this).next("a").attr("href"));
  });

Answer 4

这应该可以解决问题

  $('checkbox').click(function() {
   var ref =$(this).next().attr('href')
   alert(ref);
  }

Answer 5

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if( $(this).attr('checked') ){
            window.location = '#' + $(this).next('a').attr('href');
        }
    });

});

带有复选框和锚标签的jquery

5 个答案: