用于搜索表中项目的Ajax oncheck事件

Question

修改搜索

<div class="highlight_2"> <a href="#" rel="toggle[inox]" data-openimage="images/collapse2.jpg" data-closedimage="images/expand2.jpg"><img src="images/collapse2.jpg" width="151" height="28" border="0" /></a>
                  <div id="inox">
<input type="checkbox" value="kar_kar" />kar and kar <br />
<input type="checkbox" value="bala_bala" />bala and bala  <br />
<input type="checkbox" value="jena_jena" />jena and jena <br />
<input type="checkbox" value="senapati" />senapati <br />
<input type="checkbox" value="sarangi_sarangi" />sarangi and sarangi <br />
<input type="checkbox" value="sairam" />sairam <br />
<input type="checkbox" value="madhumita" />madhumita <br />
                     <div class="clear"></div>
                  </div>

搜索表

 <tr>
<td>Sl No.</td>
<td>Bus Operator</td>
<td>Bus No.    </td>
<td>Departure Time</td>
<td>Arrival time</td>
</tr>
<?php
 $count=0;
$s=mysql_query("SELECT * FROM  bus_detail where source_point='$_SESSION[source_point]' && destination_point='$_SESSION[destination]'");
while($row=mysql_fetch_array($s))
{
$count+=1;
?>

 <tr>
 <td><?php echo $count; ?></td>
<td><input name="bus_name" type="text" value="<?php echo $row['bus_name'];?>" class="input_box" />  </td>
<td><?php echo $row['bus_no'];?></td>
   <td><?php echo $row['departure_time'];?></td>
<td><?php echo $row['arrival_time'];?></td>
</tr>
<?php }?>

我想在ajax oncheck事件中使用我的修改搜索..在我给出的图片中，这是我的搜索列表apper但是如果我从总线操作员div检查复选框名称“jena和jena”，它应该只显示jena和jena的结果，另外两个，我想要隐藏它们。我想根据我的公交运营商修改我的搜索（在检查运营商列表中的复选框后）..它将是一个非常有帮助..谢谢

我的数据库：

Answer 1

抱歉，我想念您的问题。我认为您在用户选择列表时要隐藏/显示html表行。如果这是您的样子，那么请通过以下代码检查。

注意：您可以调整此代码以获得更好的性能和结果

小提琴：http://jsfiddle.net/663Mx/2/

$("#inox input[type='checkbox']").live('click', function () {

    // STORE CHECKED VALUED IN ARRAY
    var cv = [];
    $("#inox input[type='checkbox']:checked").each(function () {
        cv.push($(this).val());
    });

    // SHOW / HIDE ROWS BY DEFAULT
    if(cv.length <= 0) {
        $("#mytab tbody").find("tr").show();
    } else {
        $("#mytab tbody").find("tr").hide();

    var rows = $("#mytab tbody").find("tr");
    var data = $(this).val();

    // LOOP THROUGH AND SHOW ONLY CHECKED ROWS
    rows.each(function (i, v) {
        for (var n=0; n<cv.length; n++) {

            var check = $(v).find('td').filter(":contains('" + cv[n] + "')");
            check.parent('tr').show();
        }

    });

   }


});