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

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.

Answer 2

As I can see for every $sale in $redeemSales you have a checkbox having id "userSelection" and a select box having id "redeemOptions". I advise you to use unique ids. So append $i=0...$i++ to the ids of both.

For Row 1: userSelection0 redeemOptions0
For Row 2: userSelection1 redeemOptions1
and so on..

In Select tag, use onchange event :-

<select name="type" id="redeemOptions<?php echo $i; ?>" class="form-control" onchange="foo(<?php echo $i; ?>)">

And write a javascript function :-

<script language="javascript" type="text/javascript">
function foo(id)
{    
    if($('#redeemOptions'+id).val() == 'None') 
    {           
        document.getElementById("userSelection"+id).checked = false;
    }
    else
    {
        document.getElementById("userSelection"+id).checked = true;   
    } 
}
</script>