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

Question

我正在使用以下代码创建数据表

<?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 或 Amex 的任何 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 中执行此操作

Answer 1

问题是 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 的一个元素。