电台点击不显示

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，因此请使用class selector代替id selector绑定事件。

<强> Live Demo

更改

$("#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

您应首先通过类选择器而不是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()
        }
    });
});

Answer 4

的 Check here for Demo

<强> 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'));
    });    
});