CODEWITHSUNDEEP
htmlcssformscheckboxradio-button
spyro95
spyro95

Reputation: 146

Let two radio-buttons behave as one checkbox

Is it possible, without big modification, to have two radio-buttons, which will be displayed as one checkbox?

Actually we're facing the problem, that we're submitting form data which will be automatically processed by our system and this isn't possible if we're using checkboxes. Until now we were using two radio buttons (Enable X: Yes | No) but our current customer wants one checkbox instead.

We know, that it would be much more easy if we'd extend our backend, but unfortunaly this is not possible.

Edit: We're having access to the backend and we could change the validation behavior, but in our opinion this would be much more effort than frontend changes. Also we would like to avoid using JS (as long as its possible).

Thanks in advance.

Upvotes: 0

Views: 631

Answers (4)

Eitan Morad
Eitan Morad

Reputation: 51

You can try to use 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>

Upvotes: 1

Henfs
Henfs

Reputation: 5411

You can make something like this:

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

Then, you hide the radio buttons, of course.

.radioButtons {
  display: none;
}

Upvotes: 1

Karl
Karl

Reputation: 850

You could use JS (jQuery in my example) to modify the radio's functionality.

You could then just check if the radio is checked or not, depending on your backend setup. This is quite a broad question - but essentially, yes you could make a radio button work like a checkbox. In this case it will just fire an alert if the radio is selected.

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

Upvotes: 0

user11796068
user11796068

Reputation:

No,if you don't have access to back end so how you can modified the code for checkbox. You don't need to extend the backend just hide the other radio button.

Upvotes: 0

Related Questions