通过使用具有相同ID的多行更改optionsMenu中的值来选中该复选框

Question

I am creating a Data table with following code

<?php 
foreach($redeemSales as $sale)
{ 
   ?>
   <tr class='clickableRow<?php echo $isRead ? '' : ' newrow' ?>' href='#'>
       <td><form><input type="checkbox" id="userSelection" name="userslection" ></form></td>
      <td><?php echo $sale["ring"];?></td>
      <td><?php echo formatFullDate($sale["soldDate"]) ?></td>
      <td><?php echo $sale["saleType"]; ?></td>
      <td>   
          <div class="col-lg-8">
              <select name="type" id="redeemOptions" class="form-control">
                <option value="None">None</option>
                <option value="CD">(CD)</option>
                <option value="Amex">American Express Card (Amex)</option>
            </select>
        </div>
      </td>
  </tr>
<?php }?>

I want to make it so if anyone change the option to any oe of CD Or Amex, it will set the selection to its row as checked.

jAVAScript code is here

<script language="javascript">
$(document).ready(function(e) 
{    
    $('#redeemOptions').change(function(){
        if($('#redeemOptions').val() == 'None') 
        {           
            document.getElementById("userSelection").checked = false;
        }
        else
        {
            document.getElementById("userSelection").checked = true;   
        } 
    });
});

</script>

As you can see that there is a for loop, so its rows getting added in a table. The above method works only for first row. If i change the options, it will set selection to Checked. But after first rows, no other row is showing that behavior. It is probably something to do with id of the elements.

How can one find out a solution so that other rows show same behavior. Secondly, if I have to get the ids or values of all rows that are "Checked" how will i do it in php

Answer 1

the problem is that an id has to identify one single element on the page, and you are generating multiple items with the same id. Change your select to something like the following:

<select name="type" class="form-control redeemOptions">

And then change your javascript function to the following, to take advantage of the fact that "this" will equal the object that the change event is being fired from:

$('.redeemOptions').change(function(){
    var menuChanged = $(this),
        parentForm = menuChanged.closest('form'),
        correspondingCheckbox = parentForm.find('input[name=userSelection]');
    if(menuChanged.val() == 'None') 
    {           
        correspondingCheckbox[0].checked = false;
    }
    else
    {
        correspondingCheckbox[0].checked = true;   
    } 
});

Finally, remove the id="userSelection" from the checkbox and just leave the name. It won't hurt the functionality but it is technically invalid because again you can only have one element of a given id on the page.