How to have an onClick event fire for certain radio button children of a <tr>

user_17936281 0
Viewed 35

I have a table row inside of a table. Inside this table row I have 4 buttons. I want to use jquery to fire an onClick for any button in the row except for the 1st one. Is there an easy way to select the <tr> itself instead of recreating an onClick for every button?

<table class="table table-striped stickeyHeaders">
    <tr id="buttonRow">
        <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="1"/>     
        <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="2"/>     
        <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="3"/>     
        <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="4"/>     
    </tr>
</table>

Here is my general though process but need some help to flesh it out all the way

$('#buttonRow').children("Some Filter that says value > 1").On('Click, function({}));
jquery javascript
2 Answers

You can use the :gt selector to avoid the first element:

$('#buttonRow').find(":radio:gt(0)").on('click', e => {
  console.log(e.target.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="table table-striped stickeyHeaders">
  <tr id="buttonRow">
    <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="1" /></td>
    <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="2" /></td>
    <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="3" /></td>
    <td><input type="radio" name="SelectedStoreRoles" class="store-privs" value="4" /></td>
  </tr>
</table>

user_5194130

You can use a combination of :not and :first-child pseudo-classes

$('#buttonRow')
  .children('td:not(:first-child)')
  .children('input')
  .on('click', function() {
    console.log(this)
  })
user_46554750
Related