0

I know this has been asked a few times but I haven't seen any posts regarding the use of the labels. The code below works for deselecting a radio button when no labels are written.

How can I add labels which allow the radio buttons to be selected/deselected with the clicking of the words rather than just the radio button itself. When I add labels my code seems to go haywire.

This is the working snippet with spans instead of labels 

document.getElementsByName('foo').forEach((radioBttn) => {
    radioBttn.addEventListener('click', function first() {
      if (this.checked) {
        this.onclick = function second() {
          this.checked = false;
        };
      } else {
        this.onclick = null;
      }
    });
  });
  
  document.getElementsByName('bar').forEach((radioBttn) => {
    radioBttn.addEventListener('click', function first() {
      if (this.checked) {
        this.onclick = function second() {
          this.checked = false;
        };
      } else {
        this.onclick = null;
      }
    });
  });
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
<br>
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
<br>
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>

This is the non-working snippet with labels instead of spans

document.getElementsByName('foo').forEach((radioBttn) => {
    radioBttn.addEventListener('mousedown', function first() {
      if (this.checked) {
        this.onclick = function second() {
          this.checked = false;
        };
      } else {
        this.onclick = null;
      }
    });
  });
  
  document.getElementsByName('bar').forEach((radioBttn) => {
    radioBttn.addEventListener('mousedown', function first() {
      if (this.checked) {
        this.onclick = function second() {
          this.checked = false;
        };
      } else {
        this.onclick = null;
      }
    });
  });
<label class="foo" for="foo1">
<input type="radio" name="foo" id="foo1">Foo</label>
<label class="bar" for="bar1">
<input type="radio" name="bar" id="bar1">Bar</label>
<br>
<label class="foo" for="foo2">
<input type="radio" name="foo" id="foo2">Foo</label>
<label class="bar" for="bar2">
<input type="radio" name="bar" id="bar2">Bar</label>
<br>
<label class="foo" for="foo3">
<input type="radio" name="foo" id="foo3">Foo</label>
<label class="bar" for="bar3">
<input type="radio" name="bar" id="bar3">Bar</label>
Andreas C
  • 163
  • 1
  • 12
  • 1
    `for="bar11"` and than `id="bar1"` :) – Roko C. Buljan Mar 21 '21 at 02:33
  • I don't understand what all your JavaScript code is for. The whole point of radio buttons is they are mutually exclusive when they have the same `name`. They do this automatically. No code needed. – Lil Devil Mar 21 '21 at 02:37
  • 1
    @LilDevil I think he wants to... at some point deselect all radios (i.e: by clicking an already selected one...) Not really sure any more. – Roko C. Buljan Mar 21 '21 at 02:38
  • Not sure what you're up to... but you don't need any JS not `for` nor `id` attributes. Just wrap your radio inputs (**with the proper name attribute!!**) inside plain ` – Roko C. Buljan Mar 21 '21 at 02:40
  • Hmm, the problem I'm having is I like the fact that you can only select one radio button of a group at a time however you cannot deselect buttons if there is no need for a selection. I understand you can use a checkbox but that doesn't have the option for only one selection at a time. I need a combination of the 2 types. – Andreas C Mar 21 '21 at 02:45
  • Gotcha. Look [here](https://stackoverflow.com/a/10877016/262708) and a couple of comments after it. – Lil Devil Mar 21 '21 at 03:23
  • In other words, don't duplicate all the existing functionality, just implement the deselect part. – Lil Devil Mar 21 '21 at 03:24

0 Answers0