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

問題は、あなたのイメージが中にあなたのチェックボックスではありませんです。チェックボックス入力は自己閉じタグです（また、それらを/>で終了する必要があります）。

.find("img")の代わりに.next("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>