javascript - 单击或选择行中的任意位置以选中复选框并突出显示它？

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 并将其包裹在标签中以允许点击图像。

我也在加载时执行更改，以防复选框已设置为在服务器或重新加载时选中

$(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来突出显示，你需要给div添加一个事件处理程序但是你需要stopPropagation

$(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>