获取复选框的ID？ - jQuery答案

【问题标题】：Get id of a checkbox? - jQuery获取复选框的ID？ - jQuery
【发布时间】：2017-03-15 05:15:33
【问题描述】：

嘿，我想知道如何在选中复选框时获取它的 id。

这就是我的 HTML 最初的样子：

<div class="check_filter">

    <div id="filter">
        <input type="checkbox" id="check1" /><label for="check1">Marketing</label>
        <input type="checkbox" id="check2" /><label for="check2">Automotive</label>
        <input type="checkbox" id="check3" /><label for="check3">Sports</label>
    </div>

</div><!-- End check_filter -->

我假设 jQuery 看起来像这样：

$(document).ready(function() {    
    $(":checkbox").click(function(){
        var id = $(this).attr('id');

        $.post("index.php", { id: id });
       //return false to ensure the page doesn't refresh
       return false;
    });    
});

我正在尝试获取选中的项目 id，然后将该 id 发布到 mysql 查询中以从数据库中获取该 id 的结果。

感谢您对此的任何帮助。

【问题讨论】：

我会使用change 事件而不是click 事件作为复选框。否则，看起来您的代码应该可以正常工作。你试过了，发现不行吗？

标签： jquery checkbox

【解决方案1】：

你可能想要change 事件在这里，像这样：

$(function() {
  $(":checkbox").change(function(){
    $.post("index.php", { id: this.id, checked: this.checked });
  });    
});

只要复选框发生变化，就会发布此消息，并让 PHP 端知道 ID 以及它是否被选中。

【讨论】：

+1 表示this.id 等，但您忘记将click 更改为change（在代码中）。 :o) 编辑：已更正。
@patrick - Wops，已修复，@Generic - 你可以在这里测试它：jsfiddle.net/nick_craver/zM4md 它适用于空格键等 :)
发表评论后我自己做了一个例子。抱歉，好像去年就修好了。

【解决方案2】：

您提供的 jQuery 可以正常工作吗？您可能应该删除return false 以显示该复选框已被选中。

编辑：$.post() 用于异步请求（AJAX 技术），因此不会刷新页面。

编辑2：您可能还想查看复选框是否被选中（不仅仅是它已被点击）：

$(document).ready(function() {    
  $(":checkbox").click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
        $.post("index.php", { id: id, isChecked: isChecked });
    });    
});

【讨论】：

【解决方案3】：

您可以使用:checkbox 选择器，然后检查id 并检查DOM 元素的属性，如下所示：

var id = $(this).find(":checkbox")[0].id; var isChecked = $(this).find(":checkbox")[0].checked;

【讨论】：

【解决方案4】：

您可以更好地使用 jQuery get 而不是 post。它允许您处理请求的输出：http://api.jquery.com/jQuery.get/

例子：

$(document).ready(function() {    
  $(':checkbox').click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
        $.get(
          'getcheckbox.php', 
          { id: id, isChecked: isChecked },
          function(data) {
            //return value in getcheckbox.php and use it in on complete function
            var result = data;
          }
        );
    });    
});

【讨论】：

【解决方案5】：

为什么我只需要这个作为复选框的名称，而 $(this) 才能访问值

$('input:checkbox').change( function() {
        console.log("here i am: " + this.name + " value = " + $(this).val() );
        }
    );

【讨论】：