javascript - 单选按钮组jquery点击事件

Question

我在每个 div 中的每个图像下隐藏了 4 个单选按钮。

   <div class="temp-inner" id="someid">
        <?php while($row = mysql_fetch_array($res)){?>
            <div data-id="<?=$row['id'];?>" class="hand  temp-selector">
                <input type="radio" name="templates_id" class="templates_id" value="<?=$row['id'];?>" />
                <label class="temp-type" style="background-image:url(<?=$row['src'];?>)"></label>
            </div>
        <? } ?>
   </div>

我需要在 image = checked 下制作单选按钮，所以我决定创建 onClick 函数

$(".hand").on("click", function() {
    $(this).children("input:radio[name=templates_id]").attr('checked',true); 
}

这部分工作完美。现在，如果在其下选中了单选按钮，我想将新类添加到整体中。我以为我可以使用 if - else 语句，但它不起作用。

$(".hand").on("click", function() {
    $(this).children("input:radio[name=templates_id]").attr('checked',true); 

    if($("input:radio[name=templates_id]").is(":checked")) {
        $(".hand").addClass("active");
    } else {
        $(".hand").removeClass("active");
    } 
};

如何正确书写？非常感谢，最好的问候!

Answer 1

以下代码将检查单击的 div 上的 radio ，删除每个带有手类的 div 上的事件类，并将事件类添加到单击的 div。

$(document).on('click', '.hand', function () {
    $(this).children("input:radio[name=templates_id]").prop('checked', true);
    $(".hand").removeClass("active");
    $(this).closest("div.hand").addClass("active");
});