jquery - 收音机点击不显示

Question

如何检查是否单击了单选按钮？

$(document).ready(function() {
$("#rad").click(function() {
        var radio = $("#rad input:checked");
        if(radio == 0)
        {
            alert($(this).data('id'));
        }
    });
});

[html]

<input type="radio" data-id='1' name="default" class="rad" value="1">
<input type="radio" data-id='2' name="default" class="rad" value="1">
<input type="radio" data-id='3' name="default" class="rad" value="1">
<input type="radio" data-id='4' name="default" class="rad" value="1">
<input type="radio" data-id='5' name="default" class="rad" value="1">

Answer 1

在代码rad中不是类id，所以使用类选择器而不是id 选择器来绑定事件。

现场演示

改变

$("#rad")

至

$(".rad")

当您单击一个radio按钮时，它会被选中，因此您无需再次验证它，并且$(this)代表您可以直接使用它的事件源，您的代码将是

$(".rad").click(function () {
    alert($(this).data('id'));
});

Answer 2

您可以按名称获取单选按钮，然后检查单击了哪个单选按钮。像这样，

    $(function() {
    $('input[name="default"]').click(function() {
     var getID = $(this).attr('data-id');
      alert(getID);
     });
    });

Answer 3

在这里查看演示

jQuery

$(document).on('click', '.rad', function () {
    alert($(this).attr('data-id'));
});

确保你有1.7+ Jquery

替代品 - 1

$(document).ready(function () {
    $('.rad').bind('click', function () {
        alert($(this).attr('data-id'));
    });
});

替代品 - 2

$(document).ready(function () {
    $('.rad').click(function () {
        alert($(this).attr('data-id'));
    });    
});

Answer 4

您应该首先通过类选择器而不是 id 选择器选择元素，然后根据需要检查已检查的状态，但由于您单击它，它总是会被检查。

之后使用.attr()方法获取data-id属性数据

$(document).ready(function(){
      $(".rad").click(function() {
        if($(".rad").is(":checked")) { // not necessarily needed
            alert($(this).attr('data-id')); // use data-id inside .attr()
        }
    });
});