让两个单选按钮表现为一个复选框答案

【问题标题】：Let two radio-buttons behave as one checkbox让两个单选按钮表现为一个复选框
【发布时间】：2019-11-26 09:18:53
【问题描述】：

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

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

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

编辑：我们可以访问后端，我们可以更改验证行为，但在我们看来，这将比前端更改更加努力。此外，我们希望避免使用 JS（只要可能）。

提前致谢。

【问题讨论】：

给出一些代码，这是一个广泛的问题

标签： html css checkbox input radio

【解决方案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>

【讨论】：

这正是我正在寻找的。谢谢！ :)
很高兴我能帮上忙

【解决方案2】：

你可以做这样的事情：

<label class="radioButtons">
  <input type="radio" name="option" value="true">
  <input type="radio" name="option" value="false">
</label>

<input type="checkbox" onchange="changeCheckbox(this)"></input>

JavaScript

function changeCheckbox(checkboxBtn) {
  if (checkboxBtn.checked) {
    document.querySelector('.radioButtons input:first-child').checked = true; // mark first radio as checked
  } else {
    document.querySelector('.radioButtons input:last-child').checked = true; // mark second radio as checked
  }
}

然后，当然是隐藏radio buttons。

.radioButtons {
  display: none;
}

【讨论】：

感谢您的快速回答。使用 JS 是我们考虑的第一件事，但我们希望我们可以避免使用它。
我明白了。只需在 HTML 中打开一个脚本标签并在其中发布 JS，因为它是一个小代码

【解决方案3】：

不，如果您无权访问后端，那么如何修改复选框的代码。您无需扩展后端，只需隐藏其他单选按钮即可。

【讨论】：

我可以访问后端，但我们不允许使用复选框进行模型验证（无论出于何种原因）
因此，如果您有后端访问权限，只需转到该单选按钮并将其删除即可。或者隐藏那个按钮

【解决方案4】：

您可以使用 JS（在我的示例中为 jQuery）来修改收音机的功能。

然后，您可以根据您的后端设置检查是否检查了收音机。这是一个相当广泛的问题 - 但本质上，是的，您可以让单选按钮像复选框一样工作。在这种情况下，如果选择了收音机，它只会触发警报。

CodePen Example

<form method="post">
<h4>Form XYZ</h4>
<label><input name="question1" type="radio" id="radio"> I agree to be contacted by StackOverflow</label>
  <button type="submit" id="submit">Submit</button>
</form>

$("input:radio:checked").data("chk", true);
$("input:radio").click(function() {
  $("input[name='" + $(this).attr("name") + "']:radio")
    .not(this)
    .removeData("chk");
  $(this).data("chk", !$(this).data("chk"));
  $(this).prop("checked", $(this).data("chk"));
});

$('#submit').click(function() {
   if($('#radio').is(':checked')) { alert("it's checked"); }
});

【讨论】：

感谢您的快速回答。使用 JS 是我们考虑的第一件事，但我们希望我们可以避免使用它。