Question

如果检查前两个框，我试图得到的结果是1 2，如果选中3个框，结果将是1 2 3. x出现为未定义。我假设这与变量范围有关，但即使我在输入函数中查看x，它一次只显示1个选择，但它没有梳理它们。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function MLSNumbersSelected()
{
    $("input:checkbox").each(function(){  
        var $this = $(this);    
        if($this.is(":checked")){
        var x = x+" "+$this.attr("id");
        }
    });
  alert(x); //should equal what is checked for example 1 or 1 2.
}
</script>
</head>

<body>
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="1" />1<br/>
        <input type="checkbox" class="checkBoxClass" id="2" />2<br/>
        <input type="checkbox" class="checkBoxClass" id="3" />3</p>
    <p>
            Check off some options then click button.
      <input type="button" name="button" id="button" value="Click to Test" onClick="MLSNumbersSelected()">
    </p>
</body>

Answer 1

您每次在循环中定义x，而是定义x一次并继续通过循环追加它。例如：

    <script>
    function MLSNumbersSelected()
    {
        var x;
        $("input:checkbox").each(function(){  
            var $this = $(this);    
            if($this.is(":checked")){
                x += " "+$this.attr("id");
            }
        });
        alert(x); //should equal what is checked for example 1 or 1 2.
    }
    </script>

Answer 2

您必须在.each()循环之外声明x。就像现在一样，它在.each()循环内声明，然后在调用下一个回调之前超出范围，所以你不能将它的值从一个回调累加到下一个回调：

function MLSNumbersSelected() {
    var x = "";
    $("input:checkbox").each(function(){  
        if (this.checked) {
            x += " " + this.id;
        }
    });
    console.log(x);
}

仅供参考，我还从循环内部删除了jQuery的使用，因为当直接DOM属性为您提供所需的一切时，没有必要这样做。

您还可以让选择器为您完成工作，方法是将:checked添加到选择器，以便它只选择已经选中的复选框。然后，您可以使用.map()和.join()更轻松地创建列表：

function MLSNumbersSelected() {
    var x = $("input:checkbox:checked").map(function(){  
        return this.id;
    }).get().join(" ");
    console.log(x);
}

Answer 3

您在循环中重新初始化x。这应该可以解决您的问题：

function MLSNumbersSelected()
{
    var x = '';    
    $("input:checkbox").each(function(){  
        var $this = $(this);    
        if($this.is(":checked")){
        x = x+" "+$this.attr("id");
        }
    });
  alert(x); 
}

Answer 4

使用它来查看它是否达到了您的需要：

var inputs = $("input:checkbox");
inputs.each(function(i){  
    if(inputs.eq(i).is(":checked")){
    x = x+" "+inputs.eq(i).attr("id");
    }
});

Answer 5

$(function() {
    $('#button').on('click', function() {
        var x = $(':checkbox:checked').map(function() {
            return this.id;
        })
        .get().join(' ');
        alert( x );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="1" />1<br/>
        <input type="checkbox" class="checkBoxClass" id="2" />2<br/>
        <input type="checkbox" class="checkBoxClass" id="3" />3</p>
    <p>
            Check off some options then click button.
      <input type="button" name="button" id="button" value="Click to Test">
    </p>

我想在循环时组合一个字符串

5 个答案: