Javascript 将变量从复选框传递到onclick函数
我创建了一个表,并将每一行作为复选框。 我想做的是,当有人检查一行或多行时,会出现一个垃圾桶图标。 单击垃圾桶将删除所选的行 这是我到目前为止写的代码: 垃圾桶出现的div:Javascript 将变量从复选框传递到onclick函数,javascript,jquery,checkbox,onclick,Javascript,Jquery,Checkbox,Onclick,我创建了一个表,并将每一行作为复选框。 我想做的是,当有人检查一行或多行时,会出现一个垃圾桶图标。 单击垃圾桶将删除所选的行 这是我到目前为止写的代码: 垃圾桶出现的div: <div class="hidden" id="adminPanelShow"> <img src="../images/garbage.jpg" class="adminPanelIcons"/><br> <img class="hrLine" src="
<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>
现在,一切正常,但我如何将所选复选框中的值(id号..)传递到垃圾桶的onclick函数中?
这意味着,我希望每次单击垃圾桶时,我都可以使用所选复选框的值执行一些操作。我想当你说“一切正常”时,你的意思是说代码直到垃圾桶显示正常工作,而不是垃圾桶功能的实现。我从您拥有的javascript函数中假设这一点。请更清楚,这将使人们能够帮助你
现在,
看看这个例子,您可以在您的案例中实现。我试过这个,效果很好
HTML:
其作用:垃圾桶div
将被隐藏,直到您选中至少一个复选框。当您选择了至少一个复选框,并单击垃圾桶时,我将向所选值的数组发出警报。调用.get()
方法时,生成的jquery对象将转换为数组
希望这有帮助。如果您已经能够选择复选框,那么读取它们的值时会出现什么问题…?
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();
}
<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>
$(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();
}
});
});