Question

在我的 page1.php 上，我想切换 page2.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);
        }
    });
};

我想只显示page2.php，如果选中了单选按钮并且没有显示任何内容（隐藏它），如果没有任何单选按钮，或者“Machester＆＃39;单选按钮被选中。

更新

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

<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();

});

使用Ajax和单选按钮切换可见性

2 个答案: