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

来源：互联网发布：海南软件编辑：程序博客网时间：2024/05/23 00:06

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

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

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