使用AJAX和无线电按钮切换可见性

Question

在我的 page1.php 上我想切换 page2.page2.php2.php 。

的可见性。

我正在使用以下代码：

<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona
<input type="radio" name="city" value="Manchester"> Manchester

我使用此代码来调用 page2.php ：

function getPage2()
{
    $.ajax({
        type: "GET",
        url: "page2.php",
        success: function(result){
            $("#show_results").html(result);
        }
    });
};

我只想在选择"无线电"按钮或"无线电"按钮或" Machester'无线电按钮"时仅显示无线电按钮时显示Page2.php。

。

---

update

我解决了它。实际上很容易。

<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona
<input type="radio" name="city" value="Manchester" onclick="getPage2(this.value);"> Manchester

我显示，我隐藏 page2.php 使用此代码：

function getPage2()
        {
    var var_name = $("input[name='city']:checked").val();
     $.ajax({
                type: "GET",
                url: "page2.php",
                success: function(result){

     if(var_name == "Barcelona")
               $("#show_results").html(result).show();
              else
                $("#show_results").html(result).hide();
                }
            });
        };

无论如何谢谢大家。

Answer 1

您可以使用jQuery选择器：

$('input').click(function(){
    $('input').show(); // Show all inputs
    $(this).hide(); // Hide the clicked input
    $.ajax({
        type: "GET",
        url: "page2.php",
        success: function(result){
            $("#show_results").html(result);
        }
    });
})

当然，这仅适用于只有这些输入的页面。

您应该在收音机上有类或ID，以直接使用选择器。

您将有类似的东西：

$('.radio-page').click(function(){ // ...

Answer 2

您只需将隐藏内容加载到原始页面上即可。这样，您可以避免使用Ajax调用。

<input class="radios" type="radio" name="city" value="Barcelona"> Barcelona
<input class="radios" type="radio" name="city" value="Manchester"> Manchester
<div id="content" style="display:none">Hide-able content</div>

，然后选择巴塞罗那时将其显示出来。

$("input[type='radio']").click(function()
{
    if($(this).val() == "Barcelona") $("#content").show();
    else $("#content").hide();
});