HTML复选框行选择代码

时间:2015-05-14 17:52:48

标签: jquery html

我需要一些帮助。

以下是我的HTML表格代码。

它有多个复选框。

我想要做的是,点击" HOLD"复选框后,我想获取所选行的发货号码字段,以便我可以使用该号码进行一些AJAX。 / p>

有人可以帮帮我吗

<table id='consignment_list' class="consignment_list_tbl">
<colgroup width='20'> </colgroup>
<?php
if ($user->getUserAccount() == "") echo "<colgroup width='30'> </colgroup>";
?>
<!-- table head -->
<thead>
<tr>
<th>Select All <input type='checkbox' name='checkall'
onclick='checkedAll(deleteConsignments1);'>  </th>
<th>Status</th>
<?php
if ($user->getUserAccount() == "") echo "<th>Account</th>";
?>
<th>Packages</th>
<th>HAWB</th>
<th>AWB</th>
<th>Consignee Name</th>
<th>City</th>
<th>Country</th>
<th>Weight</th>
<th>No of Pieces</th>
<th>Piece ID</th>
<th>Hold</th>
<th>Heavy Weight</th>
</tr>
</thead>
<!-- table foot -->
<tfoot>
<tr>
<td>&nbsp;</td>
<?php
if ($user->getUserAccount() == "") echo "<td>&nbsp;</td>";
?>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tfoot>

<!-- table body -->

<tbody>
<?php
foreach ($consignment_array as $ct_idx => $consignment)
{
foreach ($consignment->getParcels(true) as $parcel)
{
if($parcel->getProcessed()==1) {
continue;
}

$status = $consignment->getStatus();
$id= $consignment->getId(); 
?> 
<tr style="background-color: red;color: black;" id="<?php  echo $parcel-
>getLicencePlate()?>" 
name="<?php echo $consignment->getAwb()?>">
<td id="c"> <input type=checkbox id= "deleteConsignments1"
name="deleteConsignments[]" onclick="row_color(this)" value="<?php  
$consignment->getId()?> "  /> </td>

<td><?php echo Consignment::stateText($status); ?></td>
<?php
if ($user->getUserAccount() == "") echo "<td>" . $consignment->getAccount()  
. "</td>";
?>
<td class="colPieces"><?php echo $consignment->getNumberPieces(); ?></td>
<td><a href='../main/consignment_edit.php?from=client&id=<?php echo  
$consignment->getId(); ?>' style="color: white;">
<?php echo $consignment->getHawb(); ?></a></td>
<td><?php echo $consignment->getAWB(); ?></td> 
<td><?php echo $consignment->getContact(); ?></td>
<td><?php echo $consignment->getCity(); ?></td>
<td><?php echo $consignment->getCountry();; ?></td>
<td><?php echo $consignment->getWeight(); ?></td>
<td><?php echo $consignment->getNumberPieces(); ?>
<td><?php echo $parcel->getLicencePlate(); ?></td>
<td><input type=checkbox onclick="row_colorHold(this)" name="hold[]"   
id="hold1" value="<?php echo $consignment->getId(); ?>" ></td>
<td><input type='checkbox' name='heavyweight[]' id="heavyweight" value="<?
 php echo $consignment->getId(); ?>"></td>
</td>
</tr>
<?php
}
 }
?>
</tbody>
</table>

1 个答案:

答案 0 :(得分:0)

这是:https://jsfiddle.net/y0vhw7cu/

请注意,它还包含jQuery,因为您用它标记了问题。

这很简单:

课程&#34;持有&#34;已添加到您的复选框:

<input class="hold" type=checkbox onclick="row_colorHold(this)" name="hold[]" id="hold1" value="<?php echo $consignment->getId(); ?>"
>

然后我们就这样做了:

// make sure the document (your markup) is ready
$(document).ready(function() {
    // detect click of any element which has the .hold classs
    $(".hold").click(function() {
        // when it happens, assign value of the clicked element to variable
        var value = $(this).val();
        // do whatever we want with this variable:)
        alert(value);
    });
});

如果你想用元素做更多的东西,它们都可以包含在这个$(document).ready

编辑:当您单击它时,此示例当然总是显示<?php echo $consignment->getId(); ?>,但是当您将其应用于实际代码时,PHP将动态地用适当的值替换它。

编辑2:https://jsfiddle.net/xtr2peu3/

根据你的评论,我们在这里做了一些不同的事情。我们将.hold类附加到<td>,其中包含&#34; hold&#34;复选框:

<td class="hold">
<input type=checkbox onclick="row_colorHold(this)" name="hold[]" id="hold1" value="<?php echo $consignment->getId(); ?>" ></td>

然后我们附加一个click事件处理程序,当它被点击时,我们抓住前一个元素的文本内容:

$(".hold").click(function() {
    var value = $(this).prev().text();
    alert(value);
});