帶單選按鈕的JQuery窗體控件

-1

我正在使用2個單選按鈕在顯示和隱藏2個不同的div之間切換。我還希望能夠檢查當前頁面加載（或重新加載）時的值，並根據當前選擇的內容設置div的顯示/隱藏狀態。帶單選按鈕的JQuery窗體控件

換句話說，做一個點擊，如果沒有點擊，然後做任何目前設置。我有這個代碼，似乎工作正常

var type_option = $('input[name=Type]:checked', '#Form').val(); 
if (type_option == 'A') { 
    $("#A").show(); 
    $("#B").hide(); 
} else { 
    $("#A").hide(); 
    $("#B").show();   
} 
$(".TypeSelect").click(function() { 
    type_option = $('input[name=Type]:checked', '#Form').val(); 
    if (type_option == 'A') { 
     $("#A").show(); 
     $("#B").hide(); 
    } else { 
     $("#A").hide(); 
     $("#B").show();   
    } 
}); 

<form> 
<input type="radio" name="Type" value="A" class="TypeSelect"> 
<input type="radio" name="Type" value="B" class="TypeSelect"> 

<div id="A">A Div</div> 
<div id="B">B Div</div> 
</form>

但這似乎並不正確，或至少非常優化。我認爲這可能工作

var type_option = $('input[name=Type]:checked', '#Form').val(); 
$(".TypeSelect").click(function() { 
    type_option = $('input[name=Type]:checked', '#Form').val(); 
}); 
if (type_option == 'A') { 
    $("#A").show(); 
    $("#B").hide(); 
} else { 
    $("#A").hide(); 
    $("#B").show();   
}

但它沒有，我假設我必須在點擊功能內設置這些div？有沒有更好的方法，我應該這樣做，或者我必須做檢查，並在單擊和外部點擊功能設置div做我想做的事情。

來源

2012-05-07 Analog

我會將邏輯移至一個函數，然後在頁面加載和點擊事件時調用它。像這樣的東西。

function toggle() 
{ 
    var type_option = $('input[name=Type]:checked', '#Form').val(); 
    if (type_option == 'A') { 
     $("#A").show(); 
     $("#B").hide(); 
    } else { 
     $("#A").hide(); 
     $("#B").show();   
    } 
} 
toggle(); 
$(".TypeSelect").click(function() { 
    toggle(); 
});

來源

2012-05-07 18:04:34

這是這篇文章中的一些很棒的建議，儘管這對我來說是最有意義的，它也是我想要的。謝謝！ – Analog

$(".TypeSelect").click(function() { 
    if (this.value == 'A') { 
     $("#A").show(); 
     $("#B").hide(); 
    } else { 
     $("#A").hide(); 
     $("#B").show();   
    } 
});

取決於頁面的初始狀態，它甚至可以是一個簡單得多：

$(".TypeSelect").click(function() { 
    $('#A, #B').toggle(); // Hide visible element, Show hidden element. 
});

來源

2012-05-07 17:27:56 gdoron

我得到點擊部分，但它與初始狀態相結合。在頁面加載時，其中一個單選按鈕將被「檢查」，我想確保正確的div顯示，然後PLUS當他們點擊收音機時我想要切換 - 這是否合理？我喜歡那個切換的外觀，我會嘗試一下。 – Analog

@Analog。然後隱藏一個div並顯示另一個div，選中正確的複選框（'checked ='checked'），然後使用第二個選項來捕獲無線電更改。不要使用JavaScript來確定什麼是DOM的初始狀態。 – gdoron

爲什麼要隱藏一個顯示其他爲什麼不直接設置顯示的爲None，做到這一點的方法有兩個同時

<div id="A" style="display: none;">A Div</div> 
<div id="B" style="display: none;">B Div</div> 

    $(".TypeSelect").click(function() { 
     type_option = this.value; 
     if (type_option == 'A') { 
      $("#A").show(); 
$("#B").hide(); 
     } else { 
$("#A").show(); 
      $("#B").show();   
     } 
    });

來源

2012-05-07 17:32:06

function togglify(opt) { 
    $('div#' + opt).show().siblings('div').hide(); 
} 
$(".TypeSelect").click(function() { 
    type_option = $(this).val(); 
    togglify(type_option); 
}).filter(function() { 
    type_option = $(':checked').val(); 
    togglify(type_option); 
});

不存在選址

來源

2012-05-07 17:59:11 thecodeparadox

帶單選按鈕的JQuery窗體控件

回答

相關問題