javascript - ajax发送的 radio 刷新值中的多个id

Question

这里有多个单选按钮

<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_a'>
<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_b'>
<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_c'>
<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_d'>

我想通过选中的按钮使用 ajax 发送值，但是只有第一个按钮会被处理，当我单击其他按钮时它不会刷新查询

这里是我的ajax

<script type="text/javascript"> 
$(document).ready(function(){
    $("#show_data").load('show_data.php');

    $("#get_this").click(function(){
        var cari = $("#get_this:checked").val();
        cariData(cari);
    });

    function cariData(e){
        var cari = e;
        $.ajax({
            type    : "GET",
            url     : "load_fields.php",
            data    : "cari="+cari,
            timeout : 3000,
            beforeSend  : function(){       
                $("#show_data").html("<img src='loading.gif' />");          
            },                

            success : function(data){
                $("#show_data").html(data);
            }
        });
    }
});
</script>

如果已经存在，能帮我找到相同的主题吗？对不起我的英语^^

Answer 1

Id 对于元素应该是唯一的。使 id 唯一、choice_1、choice_2 或类似的东西，或者您可以将 id 更改为类，并在您的 jquery 中将 id 选择器更改为类选择器。将 html 更改为类似以下内容:

<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_a'>
<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_b'>
<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_c'>
<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_d'>

和js到

$("input:radio[name=Tbl]").click(function() {
    var cari = $(this).val();
    cariData(cari);
});

或

$(".get_this").click(function(){
    var cari = $(".get_this:checked").val();
    cariData(cari);
});