Question 246600 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Dynamically passing value to .click event Jquery

I am getting the values of a CSS class using Jquery. When I click the header, I want all of the radio boxes to be marked as checked.
I loop through and find the values, using console.log to check if I am returning the correct values which I am. However when I try to use the function, it will only run it correctly on the first element in the array, where I would like it to apply to all names found in the loop.

var skil = $('.Routes');
var skills = new Array();
skil.each(function(i) {
  skills.push($(this).text());
  var Route = '#'+skills[i].replaceAll(' ','');
  console.log(Route);
   $(Route).on('click', function() {
    $(Route).prop("checked", true); //This only performs the function on the First value (in this case for "Purchased")
   });
});

Below is an extract of code which runs correctly on both headers. I could replicate this, but there are 17 classes, so ideally I would like to dynamically pass the value in and run through one function if possible.

$('#Purchased').on('click', function() {
    $('.Purchased').prop("checked", true);
});

$('#BST').on('click', function() {
    $('BST').prop("checked", true);
});

See HTML to build table below

<th class="rotate"><div><span class ="Routes" id ="Purchased"> Purchased</span></div></th>
    <th class="rotate"><div><span class ="Routes" id ="BST> BST</span></div></th>

<td bgcolor="#8DB255" class=""> <input type="radio" class="get_value Purchased" name="48215:4G1" id="r8215:4201" value="4:716:597:18.25:200:0:200:NA:PBJB_18223_JTC:375:8215:4:20:2023/09/13:284:284:284:284:284:0::0" checked=""></td>
    <td bgcolor="#8DB255" class=""> <input type="radio" class="get_value BST" name="48215:4G1" id="r8215:4201" value="4:716:597:18.25:200:0:200:NA:PBJB_18223_JTC:375:8215:4:20:2023/09/13:284:284:284:284:284:0::0" checked=""></td>
Tags:

2

Answers


  1. 0

    The issue lies with a name mismatch.
    The ID of your span element is Angle_Plant

    Your html says

    <th class="rotate"><div><span class ="Routes" id ="Angle_Plant"> Angle Plant</span></div></th>

    Therefore the result of this var Route = '#'+skills[i].replaceAll(' ',''); would give you AnglePlant

    Now you see that AnglePlant which you then use as a selector on the next line $(Route).on('click', function() { would not match with the HTML element’s ID Angle_Plant

    This is the base reason why it does not work.

    Your best bet is to rename your html element’s ID to AnglePlant as such:

    <th class="rotate"><div><span class ="Routes" id ="AnglePlant"> Angle Plant</span></div></th>
    Login or Signup to reply.
  2. 0

    I suggest that you use Jquery to add a click handler on the header then use the header text to assign the prop of each table row radio button. Please see fiddle: https://jsfiddle.net/martlark/hsfrvj90/6/

     $('.Routes').on('click', function(e) {
  const radioClass=e.target.innerText.replace(' ', '_');
  $(`.${radioClass}`).prop("checked", true); 
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search