将变量从复选框传递到 onclick 函数答案

【问题标题】：pass variables from checkboxes to an onclick function将变量从复选框传递到 onclick 函数
【发布时间】：2014-03-14 11:23:02
【问题描述】：

我创建了一个表格，每一行都作为一个复选框。我想要做的是当有人检查一个或多个行时，会出现一个垃圾桶图标。点击垃圾桶会删除选中的行。

这是我目前写的代码：

垃圾桶出现的div：

<div class="hidden" id="adminPanelShow">
      <img src="../images/garbage.jpg" class="adminPanelIcons"/><br>
      <img class="hrLine" src="images/line.png"/>
</div>

桌子：

<table>
         <tr><td><input type = "checkbox" name="idPriv[]" id="idPriv"  onclick="evaluateIT(this)" data-related-item="adminPanelShow" value ="<?php echo $value["id"]?>" /></td>
             <td><input type="text" name="userName[]" id="userName" class="adminPanel" value="<?php echo $value["userName"]?>"/></td>
             <td><input  name="firstName[]" type="text" id="firstName" class="adminPanel" value="<?php echo $value["firstName"]?>"/></td>
             <td><input  name="lastName[]" type="text" id="lastName" class="adminPanel" value="<?php echo $value["lastName"]?>"/></td>
         </tr>
</table>

javascript代码：

function evaluateIT(obj){

    var item = $(obj);
    var relatedItem = $("#" + item.attr("data-related-item"));
    var length = $("input:checked").length;

    if(item.is(":checked") )
        relatedItem.fadeIn();
    else if(item.not(":checked") && length == 0)
        relatedItem.fadeOut();   

}

现在，一切正常，但是我如何将选定复选框中的值（id 编号..）传递到垃圾桶的 onclick 函数中？这意味着，我希望每次单击垃圾箱时，我都可以使用所选复选框的值进行一些操作。

【问题讨论】：

好吧，如果您已经能够选中选中的复选框，那么读取它们的值的问题在哪里......？

标签： javascript jquery checkbox onclick

【解决方案1】：

我认为当您说“一切正常”时，您的意思是说代码直到 garbage-can 显示正常工作，而不是 garbage-can的实现> 功能。我假设这是您拥有的 javascript 函数。请更清楚哪些人可以帮助您。

现在，

看看这个例子，你可以在你的情况下实现。我试过了，它可以工作

HTML：

<div id="garbagecan" style="border: 1px solid red">garbagecan</div>
<ul id="books">

    <li><input id="book1" value="book1" type="checkbox"><span>Book1</span>
    </li>
    <li><input id="book2" value="book2" type="checkbox"><span>Book2</span>
    </li>
    <li><input id="book3" value="book3" type="checkbox"><span>Book3</span>
    </li>
    <li><input id="book4" value="book4" type="checkbox"><span>Book4</span>
    </li>
</ul>

Javascript 代码 [使用 jquery]

$(document).ready(function($) {

    $("#garbagecan").hide();

    $("#garbagecan").click(function() {
        var selectedIds = $("#books :checkbox:checked").map(function() {
            return $(this).val();
        }).get();
        alert(selectedIds);

    });

    $("#books :checkbox").click(function() {

        if ($("#books :checkbox:checked").length > 0) {
            $("#garbagecan").show();
        } else {
            $("#garbagecan").hide();
        }
    });
});

它的作用：垃圾桶div 将被隐藏，直到您选择至少一个复选框。当您至少选择了一个复选框并单击垃圾桶时，我会提醒所选值的数组。当您调用 .get() 方法时，生成的 jquery 对象将转换为数组。

希望这会有所帮助。

【讨论】：