使用jquery find()在复选框中查找图像

Question

我想根据复选框内的图像是否被选中来更改其src属性。如果选中则检查有效，但.attr("src")始终是未定义的。

如何将img放入复选框中？

cboxes.each(function() {
  cb = $(this);
  cbImg = cb.find("img");

  if (cb.is(':checked')) {

    alert(cbImg.attr("src")); //returns undefined

    cbImg.attr("src", "css/img/checkbox_fylld.png");
  } else {

    cbImg.attr("src", "css/img/checkbox_ofylld.png");
  }
});

和HTML

<ul class="nav-justified">
  <li>
    <label>
      <input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="0">
      <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
      <br />0-2år</label>
  </li>
  <li>
    <label>
      <input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2">
      <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
      <br />2-10 år</label>
  </li>
  <li>
    <label>
      <input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10">
      <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
      <br />10+ år</label>
  </li>
</ul>

Answer 1

​

$(document).ready(function(){
     $('.ageSelect').each(function() { 
        cb = $(this);
        cbImg = cb.next("img");
        if (cb.attr('selected')) {
            alert(cbImg.attr("src"));//returns undefined
             cbImg.attr("src", "css/img/checkbox_fylld.png");
        } else {
            cbImg.attr("src", "css/img/checkbox_ofylld.png");
        }
     });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="nav-justified">
                        <li><label><input class="ageSelect" type="radio" selected id="timeSpan" name="timeSpan" value="0"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />0-2år </label></li>
                        <li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />2-10 år</label></li>
                        <li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10"><img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />10+ år</label></li>
                    </ul>

​

您没有任何复选框。它们是单选按钮。

但是，下面是代码：

Answer 2

问题是你的图片不在你的复选框里。Checkbox输入是自动关闭的标签(你也应该用/>结束它们)。

使用.next("img")而不是.find("img")。

最后一件重要的事:您需要将图像处理包装在一个事件侦听器中：

$("input[name=\"timeSpan\"").on("change", function() {...});

因此，每次更改无线输入时，都会执行代码。

​

$("input[name=\"timeSpan\"").on("change", function() {

  $("input[name=\"timeSpan\"").each(function() {

    var cbImg = $(this).next("img");

    if ($(this).is(':checked')) cbImg.attr("src", "http://www.clker.com/cliparts/8/8/c/0/1197121244407718078webmichl_powerbutton_2_states_%28_on_off_%29_1.svg.med.png");

    else cbImg.attr("src", "https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg");
  });
});

.ageSelectImg {
  height: 25px;
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-justified">
  <li>
    <label>
      <input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="0" />
      <img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
      <br />0-2år</label>
  </li>
  <li>
    <label>
      <input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2" />
      <img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
      <br />2-10 år</label>
  </li>
  <li>
    <label>
      <input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10" />
      <img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
      <br />10+ år</label>
  </li>
</ul>

​