[FIXED] How to change <td> value only in a specific row with jQuery?

Issue

If I have a table with 2 columns, a textfield and a checkbox... Each column has a class, and multiple rows in it. I don't know how to work this out: If the textfield's number larger than 10, that row's checkbox automatically change from unchecked to checked. Any ideas?

Solution

ok .. you can get the value of the input .. and in every keystroke check if the entered number is greater than 10 then loop through all the checkboxes and check them like that

 $(".textfield").on("input", function () {
    if (+$(this).val() > 10) {
       $(".checkboxes").prop("checked", true)
    } else {
       $(".checkboxes").prop("checked", false)
    }
 })

you can try this and tell me if something went wrong

note : I added (+) before the $(this).val() to make sure the value is converted from string to number

edit: if you want to make an input for every row so this will not work!

you can make a specific class for every row and put the same class as a data attr in every input .. and then you can directly access to the input specific row checkboxes like that

$(".textfields").on("input", function () {
  if (+$(this).val() > 10) {
     $(`.${$(this).attr("data-id")} > td > 
      checkboxes`).prop("checked", true)
  } else {
     $(`.${$(this).attr("data-id")} > td > 
      checkboxes`).prop("checked", false)
   }
})

I hope this works .. I know It's a little bit confusing .. by understanding the main idea you solve it with multible solutions

If you can't understand this let me know

Answered By - Ahmed Safwat

Answer Checked By - Senaida (PHPFixing Volunteer)