Question

我在网站上有几个复选框。此复选框也可以是div check，但一次只能有一个复选框<div class="sth"> <input type="checkbox" class="myCheck"><label>blabla</label> </div> <div class="sth"> <input type="checkbox" class="myCheck"><label>blabla</label> </div> <div class="sth"> <input type="checkbox" class="myCheck"><label>blabla</label> </div>。那就是问题所在。当我想通过div点击checbox时 - 它有效。

当我想一次只检查一个checbox时 - 它有效。但是当我同时想要这两个功能时 - 事实并非如此。

所以这里是代码（例如）：

$("div.sth").on("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( !checkbox.prop("checked") ){
        checkbox.prop("checked",true);
    } else {
        checkbox.prop("checked",false);
    }
});

$('input:checkbox').on('change', function() {
    $('input:checkbox').not(this).prop('checked', false);  
});

和jQuery：

private String month;
private int day;
private int hour, minute;
private String message;

Appointment() {
    month = "Jan";
    day = 1;
    hour = 12;
    minute = 0;
    message = "message";
}

private void setMonth(String monthIn) {
    if (monthIn.length() > 3) {
        System.out.println("Re-enter and keep month to 3 letters");
    } else {
        month = monthIn;
    }
}

private void setDay(int dayIn) {
    day = dayIn;
}

private void setHour(int hourIn) {
    hour = hourIn;
}

private void setMinute(int minuteIn) {
    minute = minuteIn;
}

private void setMessage(String messageIn) {
    message = messageIn;
}

public void inputAppointment() {
    System.out.println("Input appointment (month, day, hour, minute, message)");
    setMonth(UserInput.getString());
    setDay(UserInput.getInt(1, 31));
    setHour(UserInput.getInt(1, 12));
    setMinute(UserInput.getInt(0, 59));
    setMessage(UserInput.getString());
}

Answer 1

<强> Updated fiddle

您应该添加以下行：

$('input:checkbox').not(this).prop('checked', false);

在"div.sth"点击事件中，先取消选中其他复选框，然后选择与点击的div相关的复选框。

希望这有帮助。

Answer 2

您是否考虑过使用单选按钮而只是使用CSS设置样式以查找您想要的内容？

否则使用另一个答案，我的第二部分是我误解了目标。

只有一个checbox通过div检查可能性检查复选框

2 个答案: