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

Question

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

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

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

编辑：我们可以访问后端，我们可以更改验证行为，但我们认为这比更改前端要费力得多。此外，我们希望避免使用 JS（只要可能）。

提前致谢。

Answer 1

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

Answer 2

您可以使用 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 Whosebug</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"); }
});

Answer 3

你可以做这样的事情：

<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;
}

Answer 4

你可以尝试使用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>

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

Let two radio-buttons behave as one checkbox

html

css

checkbox

input

radio