Question

我有一个具有相同名称和ID但价值不同的复选框。当我点击复选框以将其传递给ajax请求时，我试图获取值。我尝试什么，我得到相同的结果，它只返回列表中的第一个值（它实际上是在PHP循环中）

function checkCheckboxState() {  

    if ($('.displayme').is(':checked')) {

     //tried all of these...

    //var id = $('.displayme').first().attr( "value" ); 
    //var id = $('.displayme').val();
    //var id = $(this).val(); 
      alert(id);

    }

      var id = $(":checkbox[name='displayme']:checked").val();
}

<input type="checkbox" name="displayme" value="27" id="displayme" class="displayme" onclick="checkCheckboxState()">
<input type="checkbox" name="displayme" value="28" id="displayme" class="displayme" onclick="checkCheckboxState()">
<input type="checkbox" name="displayme" value="29" id="displayme" class="displayme" onclick="checkCheckboxState()">

Answer 1

您不应该在同一页上多次使用相同的ID。

您可以在更改复选框时绑定事件，然后使用以下内容获取值：

$("checkbox.displayme").on("change",function(){
    var checker = $(this).is(':checked');
    //your ajax code here
});

如果你的复选框是在php循环上生成的，你可以使用循环的索引生成不同的id（但是上面的代码你不需要任何id）。

Answer 2

您的第一个问题是您有多个具有相同id的元素。他们需要独一无二。在这种情况下，您甚至可以删除它们，因为您具有用于标识元素的公共类名称。

要解决您的实际问题，您需要获取对事件处理程序中单击的复选框的引用。由于您已经在使用jQuery，因此可以使用change事件处理程序来实现。试试这个：

$(function() {
  $('.displayme').change(function() {
    if (this.checked)
      console.log(this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="displayme" value="27" class="displayme">
<input type="checkbox" name="displayme" value="28" class="displayme">
<input type="checkbox" name="displayme" value="29" class="displayme">

或者，您可以使用map()构建所有选中复选框的数组，然后可以在单个AJAX请求中传递这些复选框：

$(function() {
  $('.displayme').change(function() {
    var values = $('.displayme:checked').map(function() {
      return this.value;
    }).get()
    console.log(values);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="displayme" value="27" class="displayme">
<input type="checkbox" name="displayme" value="28" class="displayme">
<input type="checkbox" name="displayme" value="29" class="displayme">

来自循环中的复选框的jquery值而不是发布

2 个答案: