Question

我在获取相应checked值的label值方面遇到了一些问题。现在我尝试使用closest属性，但它没有工作，因为我没有tr并且也无法使用它。问题是我在checkbox标记内有li及其值。点击button我会调用一个需要向我提供checked值的函数。所以我不知道我怎么能拿到它。以下是我的代码和我尝试过的内容。

function test() {
  $('.chkName').each(function() {
    if ($(this).is(':checked')) {
      //How do i fetch the coorresponding val?
    }
  });
}

<li class="listRow" style=" max-width:314px; min-width:314px;">
  <label>
    <input id="id1" type="checkbox" name="" checked="checked" class="chkName">
    <label>test</label>
  </label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
  <label>
    <input id="id2" type="checkbox" name="" checked="checked" class="chkName">
    <label>test1</label>
  </label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
  <label>
    <input id="id3" type="checkbox" name="" class="chkName">
    <label>test2</label>
  </label>
</li>

Answer 1

在我们提出您的问题之前，有几个问题需要解决。首先，由于嵌套了<label>元素，因此HTML无效。我建议您删除外部属性，并为内部提供for属性，以将其与兄弟复选框相关联。此外，您不应该使用内联样式（或JS）。 .listRow元素已经有了类，因此您可以轻松地将样式放在样式表中。

至于问题，您可以使用:checked选择器仅查找选中的元素。然后，在each()循环中，您可以使用this关键字来引用迭代中的当前元素。从那里你可以使用next()来获取兄弟标签元素。试试这个：

＆＃13;

function test() {
  $('.chkName:checked').each(function() {
    var $label = $(this).next('label');
    console.log($label.text());
  });
}

test();

＆＃13;

.listRow {
  width: 314px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="listRow">
    <input id="id1" type="checkbox" name="" checked="checked" class="chkName">
    <label for="id1">test</label>
  </li>
  <li class="listRow">
    <input id="id2" type="checkbox" name="" checked="checked" class="chkName">
    <label for="id2">test1</label>
  </li>
  <li class="listRow">
    <input id="id3" type="checkbox" name="" class="chkName">
    <label for="id3">test2</label>
  </li>
</ul>

＆＃13;

Answer 2

我建议在复选框本身设置一个值。

<li class="listRow" style=" max-width:314px; min-width:314px;">
        <input value="test" id="id1" type="checkbox" name="" checked="checked" class="chkName">
          <label>test</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
        <input value="test1" id="id2" type="checkbox" name="" checked="checked" class="chkName">
          <label>test1</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
        <input value="test2" id="id3" type="checkbox" name="" class="chkName">
          <label>test2</label>
</li>

JS：

 function test()
    {
         $('.chkName').each(function() 
        {
            if($(this).is(':checked'))
            {
                //How do i fetch the coorresponding val?
                console.log($(this).val())
            }
        }); 

    }

否则，如果你真的想要标签的价值，请使用＆＃34; next＆＃34;：

 function test()
    {
         $('.chkName').each(function() 
        {
            if($(this).is(':checked'))
            {
                //How do i fetch the coorresponding val?
                console.log($(this).next().text())
            }
        }); 

    }

获取与行中复选框的选中值对应的label的值

2 个答案: