Question

这段代码有什么问题？为什么它不显示价值？

<script>
    $(document).ready(function()
    {
        $('#radio_div').change(function(event){
            var value = $("input[@name='rdio']:checked").val();
            $('#update_text').html('Radio value:' + value);
        });
    });
    </script>
    </head>                                                                 
    <body>  

    <div id="radio_div">
        <input type="radio" name="rdio" value="a" />
        <input type="radio" name="rdio" value="b" />
        <input type="radio" name="rdio" value="c" />
    </div>
    <div id="update_text">Please push radio button</div>

Answer 1

因为你绑定了radio_div div的change事件。 div不会触发更改事件，只有输入元素才会这样做..

请改为：

<script>
$(document).ready(function()
{
    $('#radio_div input').change(function(event){
        var value = $("input[@name='rdio']:checked").val();
        $('#update_text').html('Radio value:' + value);
    });
});
</script>
</head>                                                                 
<body>  

<div id="radio_div">
    <input type="radio" name="rdio" value="a" />
    <input type="radio" name="rdio" value="b" />
    <input type="radio" name="rdio" value="c" />
</div>
<div id="update_text">Please push radio button</div>

Answer 2

您正在向change元素添加<div>处理程序由于<div>元素从不生成change个事件，因此您的代码无效。

相反，您应该将change处理程序添加到<{1}}元素内的input元素中，如下所示：

<div>

（:radio selector匹配无线电输入）

Answer 3

试试这个：

$('#radio_div input:radio').click(function() { 
    if($(this).is(':checked'))  {
        $(this).val(); // $(this).attr('value'); 
    }
});

Answer 4

试试这个

$(document).ready(function()
    {
        $("#radio_div input[@name='rdio']").change(function(event){
            if ($(this).is(':checked')) {
                var value = $(this).val();
                $('#update_text').html('Radio value:' + value);
            }
        });
    });

Answer 5

因为您将事件处理程序置于div的更改中，并且没有任何更改。你需要这样做：

$(document).ready(function()
{
    $("input[@name='rdio']").click(function(event){
        if ( $(this).checked)
           console.log( $(this).value);
    });
});

带有单选按钮的jQuery

5 个答案: