单选按钮与复选按钮的相互转换

最新推荐文章于 2024-01-29 09:48:24 发布

米米余

最新推荐文章于 2024-01-29 09:48:24 发布

阅读量1.5k

点赞数

分类专栏：编程总结 jquery 文章标签： jquery prop

本文链接：https://blog.csdn.net/qq_37017864/article/details/71642356

版权

编程同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

总结

22 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

单选按钮可以和复选按钮相互转换：

一、复选按钮转换为单选按钮

1. 思想：遍历所有的checkbox，将所有的checkbox都设为没有选中的状态，点击了谁，谁就勾选；

 
 当双击同一个checkbox时，就是去掉勾选。 

 
 js代码： 

$(function(){
    $("#tbody").on("click","input[type=checkbox]",function(e){
        $("input[type='checkbox']").each(function(){
            this.checked = false;
        });
        e.target.checked=true;
        var db=e.target;
        db.ondblclick=function () {

            db.checked=false;
        }
    });
});

2 . 思想：利用jQuery中的prop()函数转换

 
 js代码： 

$(function () {
    $("input").prop("type","radio");
});

二、单选按钮转换成复选按钮

1.利用jquery的prop函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="reference/js/jquery-3.2.0.min.js"></script>
</head>
<body>
    <input type="radio" name="optionsRadios">
    <input type="radio" name="optionsRadios">
    <input type="radio" name="optionsRadios">
</body>
<script>
    $(function () {
        $("input").prop("type","checkbox");
    });
</script>
</html>

米米余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选按钮与复选按钮的相互转换

单选按钮可以和复选按钮相互转换：一、复选按钮转换为单选按钮1. 思想：遍历所有的checkbox，将所有的checkbox都设为没有选中的状态，点击了谁，谁就勾选；当双击同一个checkbox时，就是去掉勾选。js代码：$(function(){ $("#tbody").on("click","input[type=checkbox]",function(e){
复制链接

扫一扫

专栏目录