通过更改不同行中的选项中的值来选中/取消选中该复选框

时间:2014-09-28 04:18:18

标签: javascript php jquery html checkbox

我有一张表格如下

<tbody>
<?php 
foreach($redeemSales as $sale)
{ 
   ?>
   <tr>
      <td><form><input type="checkbox" name="userSelection" ></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" class="form-control redeemOptions">
                <option value="None">None</option>
                <option value="CD">CherieDori Credit (CD)</option>
                <option value="Amex">American Express Card (Amex)</option>
            </select>
        </div>
      </td>
  </tr>
<?php }?>
</tbody>

我想要的是,当我选择让我们说默认值是“无”时。

当我选择第二个选项“CD”时,自动选中复选框。

如果我更改为任何其他选项,则应自动取消选择。

有多行,我只希望选中相应的复选框。

以下是我在javascript中尝试过的内容

$(document).ready(function(e) 
{    
    $('.redeemOptions').change(function()
    {
        var menuChanged = $(this);

        parentForm = menuChanged.closest('form');
        correspondingCheckbox = parentForm.find('input[name=userSelection]');

        if(menuChanged.val() == 'CD') 
        {           
            correspondingCheckbox[0].checked = true;
        }
        else
        {
            correspondingCheckbox[0].checked = false;   
        } 
    });
});

现在首先,correspondingCheckbox.checked = true;无效。我怎样才能弄清楚。

其次,如果按下按钮,我想获取所有选定行的ID。例如,第1排,第3排等

表格下方有一个按钮

<a class="btn btn-primary" href="actions.php?j=5&saleIds=x,x,x,x">Redeem Sales &rarr;</a>

我想发送我所选行的所有销售ID。 foreach($redeemSales as $sale)销售及其销售ID是否可以通过$sale['id'].获取,我需要将其添加到数组中,当我将复选框更改为true时,然后在点击herf按钮上方时将其发送。我将如何在选中的选项或单击按钮的javascript中执行此操作,它会检查所有选中的复选框并制作一个列表并传递给actions.php?

1 个答案:

答案 0 :(得分:1)

问题可能是遍历复选框。基于上面的标记,您可以执行以下操作:

$(document).ready(function(){   
    $('.redeemOptions').on('change', function(){
        var value = $(this).val();
        var status = (value == 'CD') ? true : false;
        $(this).closest('tr').children()[0].childNodes[0].checked = status;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tbody>
    <tr>
  <td><input type="checkbox" name="userSelection[]" ></td>
  <td>ring1</td>
  <td>2014-09-28</td>
  <td>type1</td>
  <td>   
      <div class="col-lg-8">
            <select name="type" class="form-control redeemOptions">
            <option value="None">None</option>
            <option value="CD">CherieDori Credit (CD)</option>
            <option value="Amex">American Express Card (Amex)</option>
        </select>
    </div>
  </td>
</tr>
<tr>
  <td><input type="checkbox" name="userSelection[]" ></td>
  <td>ring2</td>
  <td>2014-09-28</td>
  <td>type2</td>
  <td>   
      <div class="col-lg-8">
            <select name="type" class="form-control redeemOptions">
            <option value="None">None</option>
            <option value="CD">CherieDori Credit (CD)</option>
            <option value="Amex">American Express Card (Amex)</option>
        </select>
    </div>
  </td>
</tr>
</tbody>
</table>
</form>

编辑:

您还应将销售ID放在复选框上:

<td><input type="checkbox" name="salesIds[]" value="<?php echo $sale['id']; ?>" /></td>

然后,在JS上:

$('.selection').on('click', function(){
    var checked = $('input[name="salesIds[]"]:checked').serialize();
    window.location.href = 'actions.php?j=5&' + checked;
});

最终要处理这个问题的PHP,salesIds将是一个数组:

$_GET['salesIds'] // is now an array