通过使用具有相同id的多行更改optionsMenu中的值来选中复选框 - Check the checkbox by changing values in optionsMenu using Multiple rows with same id

Check the checkbox by changing values in optionsMenu using Multiple rows with same id

本文关键字：optionsMenu 复选框 id | 更新日期: 2023-09-27

我正在创建一个带有以下代码的数据表

<?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 }?>

我想这样做，如果有人将选项更改为CD或美国运通的任何oe，它会将选择设置为选中的行。

jAVAScript代码在这里

<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>

正如您所看到的，有一个for循环，所以它的行被添加到表中。上述方法仅适用于第一行。如果我更改选项，它会将选择设置为选中。但在第一行之后，没有其他行显示这种行为。这可能和元素的id有关。

如何找到一个解决方案，使其他行显示相同的行为。第二，如果我必须获取所有被"检查"的行的id或值，我将如何在php

中执行此操作

问题是，一个id必须标识页面上的一个元素，而您正在生成具有相同id的多个项目。将您的选择更改为以下内容：

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

然后将您的javascript函数更改为以下内容，以利用"this"将等于触发更改事件的对象这一事实：

$('.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;   
    } 
});

最后，从复选框中删除id="userSelection"，只保留名称。它不会损害功能，但从技术上讲是无效的，因为页面上只能有一个给定id的元素。

正如我所看到的，对于$reduceSales中的每一笔$sales，都有一个id为"userSelection"的复选框和一个id为"reduceOptions"的选择框。我建议你使用唯一的id。因此，将$i=0…$i++附加到两者的id。

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

在Select标记中，使用onchange事件：-

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

并编写一个javascript函数：-

<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>