下一个兄弟不起作用答案

【问题标题】：nextsibiling doesn't work下一个兄弟不起作用
【发布时间】：2011-06-05 00:21:17
【问题描述】：

这是我正在做的示例代码。不幸的是，当我单击第二个复选框以获取其后链接的 href 时，警报（nextElem.value）返回“未定义”。你知道如何解决它吗？

   <HTML>
<HEAD>
<TITLE>Checkbox Inspector</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function validate()
{
    for (i = 0; i <(document.f1.checkThis.length) ; i++) {
        if (document.f1.checkThis[i].checked) {
            var elem = document.f1.checkThis[i];
            var nextElem = elem.nextSibling; 
            alert(nextElem.href);
            }
        }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="f1">
<INPUT TYPE="checkbox" NAME="checkThis" value="http://www.google.com" onClick="validate()">Check here<BR>
<a href="http://www.google.com">click here</a>    
</FORM>
</BODY>
</HTML>

【问题讨论】：

您到底想验证什么？假设您正确访问了复选框的同级复选框（如图所示，您实际上并没有这样做），根据前一个复选框的选中状态检查其值没有多大意义。是否要检查选中复选框的值？陈述您的目标，我们或许可以提出更合适的方法。
能否请您查看已编辑的问题。我需要知道选中复选框之后的链接的 href。

标签： javascript

【解决方案1】：

使用 jQuery 获取链接的 href

http://jsfiddle.net/mplungjan/H9Raz/：

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

由于 BR，我们需要 nextAll，令人惊讶的是，因为我使用带有“a”的 next selector

在这里查看为什么它不起作用：Cleanest way to get the next sibling in jQuery

通过表单访问和 ID 使用获取链接的 href - 无 jQuery

http://jsfiddle.net/mplungjan/fKE3v/

window.onload=function() {
  var chks = document.getElementsByName('checkThis');
    for (var i=0;i<chks.length;i++) {
        chks[i].onclick=function() {
            var id = this.id;
            var linkId="link_"+id.split("_")[1]
            alert(document.getElementById(linkId).href)
        }
    }
}

<form>
  <div>
    <input type="checkbox" name="checkThis" id="chk_1" value="http://www.google.com" />Check here<br/>
    <a href="http://www.google.com" id="link_1">click here</a><br>   
    <input type="checkbox" name="checkThis" id="chk_2" value="http://www.bing.com" />Check here<br/>
    <a href="http://www.bing.com" id="link_2">click here</a>       
  </div>
</form>

获取下一个复选框的表单访问权限

<INPUT TYPE="checkbox" NAME="checkThis" value="http://www.google.com" onClick="validate(this.form)">Check here<BR>
<INPUT TYPE="checkbox" NAME="checkThis"  onClick="validate(this.form)">Check here2<BR>

function validate(theForm) {
    var chk = theForm.checkThis
    for (i = 0; i <chk.length) ; i++) {
        if (chk[i].checked) {
            var nextElem = chk[i+1]; 
            if (nextElem) alert(nextElem.value);
        }
    }
}

【讨论】：

能否请您查看已编辑的问题。我需要知道选中复选框之后的链接的 href。

【解决方案2】：

您的问题是 nextElem 是复选框之后的文本节点，而不是下一个复选框；文本节点没有value 属性。例如，试试这个：

function validate() {
    for (i = 0; i < (document.f1.checkThis.length); i++) {
        if (document.f1.checkThis[i].checked) {
            var elem = document.f1.checkThis[i];
            var nextElem = elem.nextSibling;
            alert(nextElem);
            alert(nextElem.value);
        }
    }
}

或者，为了您的方便：

http://jsfiddle.net/ambiguous/sUzBL/1/

【讨论】：

@nasi：很酷，这是正确的方法，并且较少依赖于您的 DOM 结构。您可能希望通过单击复选框来接受他的回答。
能否请您查看已编辑的问题。我需要知道选中复选框之后的链接的 href。
@nasi：这是一个全新的问题，而不是简单的编辑。这是elem.nextSibling.nextSibling.nextSibling.nextSibling 的提示，但您确实想改用循环。
对此我很抱歉。但即使使用您的建议，我也无法获得href。警报（elem.nextSibling.nextSibling.nextSibling.nextSibling.href）返回“未定义”
@nasi：最后一个提示：document.f1.checkThis 不再是数组了。