html - 让两个单选按钮表现为一个复选框

Question

是否可以在不进行大的修改的情况下，有两个单选按钮，它们将显示为一个复选框？

实际上我们面临的问题是，我们提交的表单数据将由我们的系统自动处理，如果我们使用复选框，这是不可能的。到目前为止，我们一直在使用两个单选按钮(启用 X:是 | 否)，但我们当前的客户想要一个复选框。

我们知道，如果我们扩展后端会容易得多，但不幸的是这是不可能的。

编辑:我们可以访问后端，我们可以更改验证行为，但在我们看来，这比更改前端要费力得多。我们也想避免使用 JS(只要可能)。

提前致谢。

Answer 1

你可以尝试使用Css

    input[id^="radio"] {
        display: none;
    }

    input[id^="radio"]:checked+label {
        display: none;
    }

    input[id^="radio"]+label {
        content: '';
        height: 15px;
        width: 15px;
        display: inline-block;
        border: 1px black solid;
        position: relative;

    }

    input[id^="radio"]+label:first-of-type::after {
        content: '';
        height: 10px;
        width: 5px;
        border-right: solid black 3px;
        border-bottom: solid black 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-60%) rotate(30deg);
    }

    input[id^="radio"]+label {
        display: none;
    }

    input[id^="radio"]:not(checked)+label {
        display: inline-block;
    }

<input type="radio" checked name="radioCb" id="radio1"><label for="radio1"></label>

<input type="radio" name="radioCb" id="radio2"><label for="radio2"></label>