Struts2 jQuery, how to update style of checked items in a table-CodePudding

I have a table with a checkbox and a <s:property> on each row:

<s:iterator value="myforms" var="form">
<tr>    
  <td >
    <input type="checkbox" name="mycheck" value="on"  data-form='<s:property value="#form.id"/>'>
  </td>
  <td >
    <s:property value="#form.dateString"/>
  </td>
</tr>
</s:iterator>

and a checkbox named "u" below the table:

<input type="checkbox" name="u" id="u" value="true"/>

when the "u" is checked, change the color of all the checked dateString (all rows that the row checkbox is checked). when the "u" is unchecked, all dateString color to black. How to find the all checked dateString and change their color. The best I can think of is this but doesn't work:

$(function() {
  $('#u').click(function() {
    changeU(this.checked);
  });
});
function changeU(checked) {
  $('input:checkbox[class=my-check]:checked').each(function(i, e) {
    let c =  checked ? "red" : "black";
    $('<input>').xxx.css('color', c);
  });
};

CodePudding user response：

As it's structured now it'll be irritating as you'll have to rely on DOM ordering.

Use the <s:iterator> value on the <td> the same way as the checkboxes.

This way there's a reliable, consistent selector to use for the <td> containing the date string.

$(function() {
  $('#u').click(function() {
    changeU(this.checked);
  });
});

function changeU(checked) {
  $('input:checkbox[class=my-check]:checked').each(function(i, e) {
    const color = checked ? "red" : "black";
    const dataId = e.dataset.form
    $(`td[data-form=${dataId}]`).css('color', color)
  });
};

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

<table>
  <tr>
    <td >
      <input type="checkbox" name="mycheck" value="on"  data-form='1'>
    </td>
    <td  data-form='1'>
      some date
    </td>
  </tr>

  <tr>
    <td >
      <input type="checkbox" name="mycheck" value="on"  data-form='2'>
    </td>
    <td  data-form="2">
      some date
    </td>
  </tr>
</table>

<input type="checkbox" name="u" id="u" value="true" /> Click me