How to get the radio button inside a label, which is inside a div?

Question

Suppose I have the following HTML.

<div id="bookmarksList">
  <label class="container">
    <input type="radio" name="bookmark" id="b1"
        onclick="onClicked(this);" checked="checked">
    <span class="radioTitle">2014</span>
  </label>
  <label class="container">
    <input type="radio" name="bookmark" id="b2"
        onclick="onClicked(this);" checked="checked">
    <span class="radioTitle">2015</span>
  </label> //So on upto 10
</div>

in onClicked() function, I want to change the color of the checked checkbox's label to red.

I want to do this using jQuery's find() method, but it is giving undefined

$("#bookmarksList").find("input[type=radio]").each(() => {
  console.log(this.id);
});

OR

$("#bookmarksList").find("label > input[type=radio]").each(() => {
  console.log(this.id);
});

How should I do it? Thank you.

score 1 · Answer 1 · edited May 25 '20 at 13:34

1

Does it work right? I mean there no need JS.

function onClicked(id) {
  console.log(id)
}

input:checked+label {
  background-color: green
}

<div id="bookmarksList">
  <input type="radio" name="bookmark" id="b1"
      onclick="onClicked(this.id)" checked>
  <label for "b1">
    <span class="radioTitle">2014</span>
  </label>
  <input type="radio" name="bookmark" id="b2"
      onclick="onClicked(this.id)">
  <label for "b1">
    <span class="radioTitle">2015</span>
  </label>
</div>

edited May 25 '20 at 13:34

answered May 25 '20 at 12:53

Dima Vak

599
5
20

1

What does *"no need JS"* mean? – charlietfl May 25 '20 at 13:06
@charlietfl, in this case, I show how to catch id with JS, but TS first of all needed to change the checked radio, what I do without JS. – Dima Vak May 25 '20 at 16:57
That makes even less sense – charlietfl May 25 '20 at 17:15
@charlietfl i don't understand what you mean. He wants to customize checked, I write hot do this without JS. – Dima Vak May 25 '20 at 18:50
Using `onClick` is still using JS. I think you mean *without using jQuery* – charlietfl May 25 '20 at 19:13
@charlietfl Please check what do `onClick` in my code -> nothing. In my answer I show: 1) how that make without js, 2) why his js not working. You can delete JS in my answer, and that still works. – Dima Vak May 25 '20 at 19:18
Ok fine but you show a JS function yet say no JS needed....that is confusing and unclear – charlietfl May 25 '20 at 19:20

tanmay_garg · Answer 2 · 2020-05-25T13:52:55.083

You can get the ids of the inputs like this:

$(document).ready(function() {
  $("#bookmarksList input[type=radio]").each(function() {
    console.log(this.id);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bookmarksList">
  <label class="container">
    <input type="radio" name="bookmark" id="b1" onclick="onClicked(this);" checked="checked">
    <span class="radioTitle">2014</span>
  </label>
  
  <label class="container">
    <input type="radio" name="bookmark" id="b2" onclick="onClicked(this);" checked="checked">
    <span class="radioTitle">2015</span>
  </label>
</div>

score 1 · Accepted Answer · answered May 25 '20 at 12:55

Try it with a normal function, instead of an arrow function here, then it should work. This worked for me:

$("#bookmarksList").find("input[type=radio]").each(function() {
        console.log(this.id);
});

But anyway, I would suggest to also do a class for your inputs you want to fetch via jQuery, then you can just get it normal via $('yourClass').each(function() {....} or if you only want to get your elements w/ this class inside your #bookmarksList div: $('#bookmarkslist .yourClass').each(function() {....}

Can also access the current element from the `each` callback arguments — charlietfl, May 25 '20 at 13:08

How to get the radio button inside a label, which is inside a div?

3 Answers3