Javascript 仅使用单选按钮选择显示列表

我正在做一个模块，管理员会得到一份申请批准的候选人名单。目前我使用单选按钮进行三个选择和一个提交按钮。现在我只想通过选择一个单选按钮来显示结果列表来实现这一点。如何在同一页面上显示所有三种不同选择的列表。 这是我创造的

<form  action=""  method="POST">

          <input type='radio'  name='users' value='unapproved' checked /> Unapproved Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type='radio'  name='users' value='approved' /> Approved Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type='radio' id='show' name='users' value='all'  /> All Candidates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="submit" value="View Candidates" id="submit" class="btn btn-success"><br><br> 

---

我发现这可以通过AJAX实现，但无法找到确切的解决方案。如果我能从中获得一些见解，将对我非常有帮助，我将不胜感激。提前感谢

在每个单选按钮标签上添加一个类，并使用

单击

事件检查单选按钮的单击和状态。你所要做的就是-

// Selecting a class using jquery. It will return all the elements that have this class
$(".radioButton").click(function() {
    // Using `this`, JS can identify which element has been clicked with class radioButton

    // Here I'm checking whether it has been selected or not
    if(this).is(":checked") {
            // Here I'm fetching the value of selected radio button
            var category = $(this).val();
            $.ajax({
            // Url of your PHP code
            url: "YOUR_URL.php",
            // Method of your Ajax request
            method: "POST",
            // Data in case of post request
            data: {
                'users': category 
            },
            success: function(result){
                console.log("Response:\n"+result);
            },
            error: function(er){
                console.log("Error\n"+er);
            }
        });
    }
});

---

谢谢你抽出时间。但是AJAX请求是这里的关键，我不确定是否实现它URL和数据部分包括什么。顾名思义，

URL

是您希望使用AJAX请求命中的URL，

data

是您随AJAX请求发送到该URL的有效负载或数据。请参阅，我有三个条件，你可以在上面的代码中看到。列出已批准的候选人、未批准的候选人和所有候选人。这三个查询都有三个不同的MySQL查询。现在在我请求的页面上，我应该如何编写查询。请检查我的问题是否已更新。只需在查询字符串中使用一个参数来区分每个候选类别或在帖子正文中传递参数。

// Selecting a class using jquery. It will return all the elements that have this class
$(".radioButton").click(function() {
    // Using `this`, JS can identify which element has been clicked with class radioButton

    // Here I'm checking whether it has been selected or not
    if(this).is(":checked") {
            // Here I'm fetching the value of selected radio button
            var category = $(this).val();
            $.ajax({
            // Url of your PHP code
            url: "YOUR_URL.php",
            // Method of your Ajax request
            method: "POST",
            // Data in case of post request
            data: {
                'users': category 
            },
            success: function(result){
                console.log("Response:\n"+result);
            },
            error: function(er){
                console.log("Error\n"+er);
            }
        });
    }
});