Question

这里的一个好成员帮助我设置了一个多重复选框示例，用于存储要在div中显示的数据。但是，当我尝试执行其中的多个时，即使我更改了变量，它们也相互交错并在div中显示相同的数据。

我在这里设置了一个简单的例子： http://jsfiddle.net/pufamuf/vrpMc/4/

感谢大家的时间:)。

Answer 1

那是因为你在两个事件处理程序中都使用了相同的选择器：input[type="checkbox"]:checked

这将选择页面中所有选中的复选框输入。

您应该使用input[name="car[]"]:checked和input[name="phone[]"]:checked 每次只选择具有给定名称的输入。

Answer 2

在您的两个功能中，您都选择了所有选中的复选框。我的修复（以及其他人可能有一个更好的修复）将添加唯一的id到围绕li的ul。

html：

<ul id='electronics'>
<li><input type="checkbox" name="phone[]" value="Nokia" />Nokia</li>

这样你可以修改你的$（'＃submit'）。点击处理程序到这样的东西：

$('#submit').click(
    function()
    {
        var htmls = "";
        $('ul#electronics>li>input[type="checkbox"]:checked').each(
            function()
            {
                htmls += $(this).val() + " ";
            }
        );

        $('.here').html(htmls);
    }
);

查看http://api.jquery.com/child-selector/，http://api.jquery.com/id-selector/了解详情。

基本上，如果没有这个或类似的变化，您的汽车品牌列表与电子品牌列表没有任何区别，您的点击处理程序都会考虑所有选中的复选框。

多个复选框脚本相互干预

2 个答案: