javascript - チェックボックスでimgクラスを変更する

Question

<div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

変更するJavaScriptに問題があります

<img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">

チェックボックスのあるクラス<input type="checkbox">。チェックボックスをオンにすると、img クラスが「unmarkedImg」から「markedImg」に変更され、チェックボックスをオフにすると、変更が元に戻ります。

    <div class="outerBox">
    <img src="pics/folder1/img1.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img1.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img2.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img2.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img3.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img3.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

    <div class="outerBox">
    <img src="pics/folder1/img4.jpg" alt="small image" class="unmarkedImg">
    <div class="innerBox">
        <img src="pics/folder1/img4.jpg" alt="big image">
        <input type="checkbox"><span>Image</span>
    </div> <!-- innerBox -->
</div> <!-- outerBox -->

別の質問を気にすることができれば。あなたが与えたjavascriptをどのように変更すれば、同じことを複数回行うことができますか。ボックスの 1 つをチェックすると、そのチェックボックスのイメージが「unmarkedImg」から「markedImg」に変わり、逆になります。テーマに独自の「ID」を与えるだけですか（ElementByClassName("class").onclick/onchange機能しないため）、それとももっと簡単で動的な方法がありますか？