通过jQuery操作input标签下的单选框和复选框的基本属性

慕多

已于 2022-08-16 23:52:56 修改

阅读量1.1k

点赞数

分类专栏：大前端文章标签： jquery javascript 前端

于 2022-08-16 23:52:54 首次发布

本文链接：https://blog.csdn.net/anzhengxv/article/details/126376477

版权

大前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单整理了一下jQuery对单选框和复选框的一些组合操作，这个文章包含对input标签下的radio和checkbox两种类型的checked和disabled等属性的调用覆写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .allok{
            font-size:2rem;
            text-align: center;
            background-color: gold;
        }
        .allnook{
            font-size:2rem;
            text-align: center;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<div class="allok">
<input type="radio" id="boy"  name="sex" value="1" >男
<input type="radio" id="girl"  name="sex" value="2" >女
</div>
<div class="allnook">
    <input type="checkbox" id="first" name="eat" checked disabled>吃
    <input type="checkbox" id="second" name="sleep">睡
    <input type="checkbox" id="third " name="study">学习
    <input type="checkbox" id="fourth" name="work">工作
    <input type="checkbox" id="fifth" name="Onlygirlcando">只有女生能做的
    <input type="checkbox" id="sixth" name="Onlyboycando">只有男生能做的
    <input type="checkbox" id="cancotr" name="canctr" value="1">控制别人
    <input type="checkbox" id="becotr" name="bectr" value="2">被控制
</div>
    <script src="./jquery.min.js"></script>
<script>
    $(':checkbox[name="sleep"]').eq(1).attr("checked",true);
    $(':checkbox[name="study"]').eq(0).attr("checked",true);
    $(':radio[name="sex"]').eq(0).prop("checked",true);
  //  $(':radio[name="sex"]').eq(0).prop("checked",true);
    $("#third").attr("disabled",true);
    $("#fourth").attr("disabled",true);
    $("body").on("change","[name='sex']",function () {
        if(this.value=="1"){
            $("#sixth").attr("disabled",false);
            $("#fifth").attr("disabled",true);
            $(':checkbox[name="Onlyboycando"]').eq(0).attr("checked",true);
            $(':checkbox[name="Onlygirlcando"]').eq(1).attr("checked",false);

        }
        else {
            $("#fifth").attr("disabled",false);
            $(':checkbox[name="Onlygirlcando"]').eq(1).attr("checked",false);
            $("#sixth").attr("disabled",true);
            $(':checkbox[name="Onlygirlcando"]').eq(0).attr("checked",true);
        }

    })
    var a = $("#cancotr").val();
    $("body").on("change","[name='canctr']",function () {
        alert("被点中了");
        if(a==1){
            alert("asdasd");
            $("#becotr").eq(0).attr("checked",true);
            a++;
        }else {
            $("#becotr").eq(0).attr("checked",false);
            a--;
        }

    })


</script>

</body>
</html>

其中包含操作单选框实现对多选框的一系列的无法选择的操作，单选框给默认值的操作，检查单选框的选择状态实现单选或者多选框的变更.

也包含多选框在选择时，给另一个多选框赋值再点击取消赋值等操作，可以举一反三

慕多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过jQuery操作input标签下的单选框和复选框的基本属性

简单整理了一下jQuery对单选框和复选框的一些组合操作，这个文章包含对input标签下的radio和checkbox两种类型的checked和disabled等属性的调用覆写。其中包含操作单选框实现对多选框的一系列的无法选择的操作，单选框给默认值的操作，检查单选框的选择状态实现单选或者多选框的变更.也包含多选框在选择时，给另一个多选框赋值再点击取消赋值等操作，可以举一反三。...
复制链接

扫一扫

专栏目录