Question

こんにちは私は、Javaスクリプトを使用してチェックボックスをトグルで生成しています。選択されていたか、またはコードを修正する方法をクリックした場合に強調したいのですか？

function draw_equipment($equipment) 
{ 
    $equipment_name = $equipment['img_link']; 
    echo "<div style='text-align:left;width:120%'>"; 
    echo "<input type='checkbox' class='toggleCheckbox'>"; 
    echo "<img src='img/$equipment_name' alt='$equipment_name' width='120px'/><br/>"; 
    echo $equipment['equip_type']; 
} 

Answer 1

チェックボックスでtoggleClassを使用し、ラベルをラップして画像をクリックすることもできます。

私はあなたが強調表示するWHOLEのdivをクリックする必要がある場合は、チェックボックスがすでに

$(function() { 
 
    $(".toggleCheckbox").on("change",function() { 
 
     $(this).closest("div").toggleClass("checked",this.checked); 
 
    }).change(); // run at load too 
 
});

.checked { background-color:pink }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style='text-align:left;width:120%'><label><input type='checkbox' class='toggleCheckbox'><img src='https://logos.tlecdn.net/100x30/m_1203_marantz_7.png' alt='$equipment_name' width='120px'/></label></div> 
 
<hr/> 
 
<div style='text-align:left;width:120%'><label><input checked type='checkbox' class='toggleCheckbox'><img src='https://resources.sport-tiedje.com/bilder/ciclosport/ciclosport_t.gif' alt='$equipment_name' width='120px'/></label></div>

サーバーで、またはリロードで確認に設定したあまりに場合には、負荷の変更を実行、あなたはDIVにイベントハンドラを追加する必要があるが、その後、あなたは

$(function() { 
 
    $("div").has(".toggleCheckbox").on("click",function() { 
 
     $(this).find(".toggleCheckbox").click(); 
 
    }); 
 
    $(".toggleCheckbox").on("click",function(e) { 
 
     e.stopPropagation(); // this should not bubble to the div 
 
    }) 
 
    $(".toggleCheckbox").on("change",function(e) { 
 
     $(this).closest("div").toggleClass("checked",this.checked); 
 
    }).change(); // run at load too 
 
});

div { background-color: #778899} 
 
.checked { background-color:green }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style='text-align:left;width:120%'><label><input type='checkbox' class='toggleCheckbox'><img src='https://logos.tlecdn.net/100x30/m_1203_marantz_7.png' alt='$equipment_name' width='120px'/></label></div> 
 
<hr/> 
 
<div style='text-align:left;width:120%'><label><input checked type='checkbox' class='toggleCheckbox'><img src='https://resources.sport-tiedje.com/bilder/ciclosport/ciclosport_t.gif' alt='$equipment_name' width='120px'/></label></div>

をする必要があるのstopPropagation