How to change input pseudo class with Javascript?

Question

I'm trying to build a 'radio button' selection style list, but not actually using input type="radio". My backend developer has advised me I need to create this using type="checkbox" in our specific case. I believe this can be done with JS. So how can I make it so that when 1 option is in checked state, the other is unchecked using JS? Here is what I have so far:

http://codepen.io/rjtkoh/pen/VLZrMo

<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>option A</div>
  </label>

<label for="toggle-2">
<input type="checkbox" id="toggle-2">
<div>option B</div>
</label>

and CSS:

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
   margin-bottom: 20px;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}

I've had a look at other threads talking about changing pseudo classes via JS, but my case dealing with input types confuses me.

Ian Clark · Accepted Answer · 2015-04-19 09:22:31Z

3

Why do you need to do this with a checkbox if the sematics work for radio? There may be a legitimate reason, but without knowing this, I'd suggest you use a radio group instead, which will work without any JavaScript whatsoever, you just need to set a common name attribute on both inputs:

input[type=radio] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
   margin-bottom: 20px;
}

/* Toggled State */
input[type=radio]:checked + div {
   background: red;
}

<label for="toggle-1">
  <input type="radio" name="option" id="toggle-1">
  <div>option A</div>
</label>

<label for="toggle-2">
  <input type="radio" name="option" id="toggle-2">
  <div>option B</div>
</label>

answered Apr 19, 2015 at 9:22

Ian Clark

9,3774 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

deowk · Accepted Answer · 2015-04-19 10:22:05Z

Here is a pure javascript solution since I don't see jQuery tags in your question:

If you REALLY need to do this with checkboxes you can do this:

html

<div id="radio_group">
<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>option A</div>
</label>

<label for="toggle-2">
<input type="checkbox" id="toggle-2">
<div>option B</div>
</label>
</div>

javascript

var options = document.getElementById('radio_group').childNodes;
var checkboxes = document.getElementsByTagName('input');

function uncheck() {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
           checkboxes[i].checked = '';
        }
    }
}

function checkBox(e) {
  e.preventDefault();
  if(e.target.nodeName == 'DIV') {
    uncheck();
    e.target.previousElementSibling.checked = 'checked';    
  }
}

for (var i = 0; i < options.length; i++) {
    options[i].addEventListener('click', checkBox, false);
}

heres a fiddle --> https://jsfiddle.net/tL68Lsub/

Ropota Rafael · Accepted Answer · 2015-04-19 09:33:15Z

0

If you really need the checkbox to work as a radio, you can use:

$("input[type='checkbox']").click(function () {
    if ($(this).is(":checked")) {
        $("input[type='checkbox']").not(this).removeAttr("checked");
        $(this).attr("checked", "true");
    }
})

answered Apr 19, 2015 at 9:33

Ropota Rafael

854 bronze badges

Collectives™ on Stack Overflow

How to change input pseudo class with Javascript?

3 Answers 3

Comments

Here is a pure javascript solution since I don't see jQuery tags in your question:

html

javascript

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Here is a pure javascript solution since I don't see jQuery tags in your question:

html

javascript

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related