JQUERY IF-STATEMENTS 仅获取 <a> 标签的 href 属性，它是 <li> 中 :checked checkbox <input> 的子元素

Question

我有一个无序列表，每个 < li > 都有一个 < checkbox > 类型的输入。它还有一个带 <a href > 属性的锚标记。 A:href 已根据用户输入动态构建。

我想遍历 < li > 列表，找到选中的输入并仅获取那些选中的输入的 href。

    <ul>
      <li><input type="checkbox"><a href="#">Link 1</a></li>
      <li><input type="checkbox"><a href="#">Link 2</a></li>
    </ul>

伪代码中的逻辑是：

for all li 
if checkbox is checked
get anchor property href

问题是当我使用 $ ( "a" ) 及其所有替代项时 :checked 、li.active input:checkbox、$( "ul li checkbox:checked a" )、$this.children(":checked").each(function(){ ...etc} 和 DOM将 return 所有锚点而不仅仅是 :checked 输入的锚点。它不会遍历列表中的列表。每次都会退出勾选列表项范围

我尝试过的一些解决方案如下：

1

$( ":checkbox:checked" ).prop( true , function(){
    $( "a" ).css( "background-color","yellow" );
});

2

$(":checkbox:checked").each(function (){
   window.open($(".myID")
  .attr("href")) 
   });

3

$('li').each(function(){
    //go to li children
    var $this = $(this);
    $this.children(":checked").each(function(){
          $this; // parent li
          $this.css( "background-color","green" ); //works until here
          var $childs = $this.children(":checked"); 
         $childs.children("a").each(function(){ //undefined
           //PRINT OUT HREF OF A (DID NOT WORK EITHER)
         });
    });

4

$('#li.active input:checkbox').on('change', function () {
    getAllValue()
});

function getAllValue() {
    var sThisVal = $(':checkbox:checked').map(function () {
        return this.value;
    }).get();
    alert(sThisVal);
}

我意识到（如果错误请纠正我）$("selector") 不能用于组合两个父> 子标签的条件，即.. $("a[href] :checkbox:checked") 将 return 所有锚点和所有输入复选框。 if 语句也是如此。我认为 .children() 函数可能会得到我的对象，但它似乎不像我期望的那样工作 input 类型 checkbox 因为它没有结束标记（？这是一个猜测）

我不想触及 html 模式，因为它是动态构建的，这是项目的最后阶段。

我要感谢大家在这里提供的帮助。 3 天来，我一直在努力寻找问题的答案。所以请不要用 "this was answered before" 打我，因为相信我，我尝试了所有建议的答案但没有用，因为这种情况不同。

Answer 1

迭代时，select 复选框子项和来自 ul 的子项的 <a> 子项：

button.onclick = () => {
  $('li').each(function() {
    const [checkbox, a] = this.children;
    if (checkbox.checked) {
      console.log(a.getAttribute('href'));
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

或者，如果您必须使用 jQuery 访问器方法：

button.onclick = () => {
  $('li').each(function() {
    const [checkbox, a] = $(this).children();
    if ($(checkbox).is(':checked')) {
      console.log($(a).attr('href'));
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

对于这么简单的东西，jQuery 中实际上没有任何用处，请随意单独使用内置 DOM 方法：

button.onclick = () => {
  document.querySelectorAll('li').forEach((li) => {
    const [checkbox, a] = li.children;
    if (checkbox.checked) {
      console.log(a.getAttribute('href'));
    }
  });
};

<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

Answer 2

您的结构对应于此 CSS 选择器：

li > :checked + a
^  ^     ^    ^ ^  
|  |     |    |  -- an <a> element
|  |     |    |
|  |     |     ---- which directly follows
|  |     |
|  |      --------- an element currently checked (<input>)
|  |
|   --------------- which is a direct child of
|
 ------------------ an <li> element

所以只需使用它然后迭代匹配的 <a> 元素

button.onclick = function(evt) {
  $('li > :checked + a').each(function(i, el) {
    console.log(el.getAttribute('href'));
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

如果你只处理 newest browsers，那么你可以在没有库的情况下完成：

button.onclick = (evt) => {
  [... document.querySelectorAll('li > :checked + a')]
    .forEach( (el) =>
      console.log( el.getAttribute('href') )
    );
};

<button id="button">click</button>
<ul>
  <li><input type="checkbox"><a href="/link1">Link 1</a></li>
  <li><input type="checkbox"><a href="/link2">Link 2</a></li>
</ul>

JQUERY IF-STATEMENTS 仅获取 <a> 标签的 href 属性，它是 <li> 中 :checked checkbox <input> 的子元素

JQUERY IF-STATEMENTS Get only the href prop of <a> tag, which is a sub element of :checked checkbox <input> in an <li>

jquery

html

checkbox

selector

checked