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

你可以使用长度属性，试试：

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

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

Answer 2

以下代码将检查div上的单选按钮，使用手动类删除每个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");
});

单选按钮组jquery单击事件

2 个答案: