将checkbox改为单选的代码

最新推荐文章于 2024-04-26 18:45:41 发布

小刚到处飞

最新推荐文章于 2024-04-26 18:45:41 发布

阅读量601

点赞数

分类专栏：踩坑日记文章标签： servlet java html javascript

本文链接：https://blog.csdn.net/m0_67560682/article/details/127523349

版权

踩坑日记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

记一段将checkbox多选改为单选的代码

使用的位置,

' <label style="width: 5%;  margin-left: 1rem"> 自检\n' +
'                        <input type="checkbox" name="other-checkbox-1" style="width: 20px; margin-left: 1rem" value="自检">\n' +
'                    </label>\n' +
'<label style="width: 5%; ; margin-left: 5rem"> 互检\n' +
'                        <input type="checkbox" name="other-checkbox-2" style="width: 20px; margin-left: 1rem" value="互检">\n' +
'                    </label>'

定义:

$(function(){
    $(document).on("change","input[name=other-checkbox-1], input[name=other-checkbox-2]",function(){
        var name = $(this).attr("name");
        var isCheck = $(this).is(":checked");
        if(name == 'other-checkbox-1'){
            $(this).parent().parent().find("input[name=other-checkbox-2]").prop("checked",isCheck ? false : true)
            $(this).parent().parent().find("input[name=other-checkbox-1]").attr("data-value",isCheck ? 1 : 2)
        }else {
            $(this).parent().parent().find("input[name=other-checkbox-1]").prop("checked",isCheck ? false : true)
            $(this).parent().parent().find("input[name=other-checkbox-1]").attr("data-value",isCheck ? 2 : 1)
        }
    })
})