通过类名 JQuery 获取 ID答案

【问题标题】：Get the ID by Class name JQuery通过类名 JQuery 获取 ID
【发布时间】：2013-11-04 03:36:08
【问题描述】：

您好，这是一个jquery 问题：

假设我有这个：

<input type="checkbox" class="select" id ="select-1">

<input type="checkbox" class="select" id ="select-2">

并且我想获取我单击提交按钮时选中的复选框的 id（注意：您只能选择 1）我在这里有这个按钮点击事件：

$("#submit").click(function(){

          if($(".select").is(':checked')){

              alert($(".select").attr('id'));
          }
});

它总是提醒“select-1”，即使我选择了带有“select-2”id 的复选框。我猜是因为它们都在同一个类中在警报中显示要找到的“.select”类。我如何获取使用它们的类名检查的特定 id？谢谢！

【问题讨论】：

您应该使用单选按钮。如果它是许多 = 单选按钮中的一个选项。如果它的多个选项来自许多 = 复选框。
更新了我的答案，添加了一个演示。

标签： javascript jquery class input checkbox

【解决方案1】：

您一次只检查一个复选框吗？

alert( $(".select:checked").attr('id') );

或者，如果您同时选中多个复选框：

$(".select:checked").each(function(){
   alert($(this).attr('id'));
});

演示：http://jsfiddle.net/UTux2/

【讨论】：

【解决方案2】：

用这种方式获取ID

$(".select:checked").attr('id');

还要记住，如果只能选择一个，最好改成radio。

【讨论】：

【解决方案3】：

您没有捕获选中的复选框，您只是在问“是否选中了一个？”。

$("#submit").click(function(){

    var elem = $(".select:checked");

    if(elem.length > 0){
        alert(elem.attr('id'));
    }
});

【讨论】：

【解决方案4】：

有多个元素。您需要检查所有具有相同类的复选框

$("#submit").click(function(){

          $(".select:checked").each(function(){
           alert($(this).attr('id'));
   });

});

【讨论】：

【解决方案5】：

您应该使用单选按钮而不是复选框来允许选择一个。

<input type="radio" name="select" value="select-1">
<input type="radio" name="select" value="select-2">

那么事情就会变得非常简单：

$("#submit").click(function(){

    alert($('[name="select"]:checked').val());
});

【讨论】：

【解决方案6】：

$("#submit").click(function(){  
          if($(".select").is(':checked')){
               var $this=$(".select").is(':checked');
               alert($this.attr('id'));
          }
});

【讨论】：

$(this) 指向$('#submit')，所以这是不正确的。

【解决方案7】：

试试这样的，你不需要迭代

        $(document).ready(function () {
            $("#submit").click(function(){
                  if($(".select").is(':checked')){
                      alert($(".select:checked").attr('id'));
                  }
            });
        });

【讨论】：

【解决方案8】：

因为您没有迭代所有具有“选择”类的元素。它总是转到第一个元素并打印结果。放置一个循环来迭代所有具有“select”类的元素。

【讨论】：