jQuery把checkbox做成radio一样的单选效果

196 阅读1分钟
<ul class="selectMessageUl"></ul>
.selectMessageUl {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 476px;
    overflow-x: scroll;
}

.selectMessageUl li {
    height: 34px;
    display: flex;
    align-items: center;
    align-content: center;
    padding-left: 10px;
}

.selectMessageUl li:hover,.forselectli {
    background: rgba(242,244,247,1);
}
.selectMessagecheck {
    margin: 0 5px 0 0 !important;
}
.selectMessagetxt {
    width: 340px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important;
    font-weight: normal !important;
    margin: 0 !important;
}
for (var i = 0; i < 30; i++) {
    var list = '<li><input type = "checkbox" name = "selectMessagecheck" value="物流相关问题' + i + '" id = "物流相关问题' + i + '" class="selectMessagecheck" onclick="selectMessagecheck(this)" ><label class="selectMessagetxt" for="物流相关问题' + i + '">物流相关问题' + i + '</label></li>'
    $(".selectMessageUl").append(list)
}
function selectMessagecheck(obj) {
    var forselect = $(".selectMessagecheck");
    for (var i = 0; i < forselect.length; i++) {
        forselect[i].checked = false; 
    }
    obj.checked = true;
    $(obj).parent().addClass("forselectli").siblings().removeClass("forselectli")
}