Question

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

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

Answer 1

使用jQuery获取链接的href

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

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

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

请在此处查看无效的原因：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);
        }
    }
}

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

nextsibiling不起作用

2 个答案: