單選按鈕「選擇」切換問題

Question

我想做一個非常非常簡單的腳本，檢查是否單擊某個單選按鈕選項，如果是，顯示另一組字段（此工作正常），但如果您取消選擇該單選按鈕選項，它隱藏了額外的一組字段（看起來很簡單，但不適用於我！）

另外我對JS/JQuery更新，所以調試這一直是一個掙扎！感謝您的任何幫助:)

我的HTML單選按鈕，觸發字段顯示 - 想象有6個其他單選按鈕選項（每個分類爲[class =「otherFund」]）。

<input type="radio" name="ItemName1" id="Relief1" value="Daughters of Penelope Charitable Relief Fund" onclick="set_item('DOP-Relief-Fund', 8)" onchange="relief_fund_handler()" /> 

這裏是文字和領域，我想與上述按鈕的選擇

<p id="Earmark1" style="display: none;"> 
    <strong>Please designate below what relief fund you would like your <em>DOP Charitable Relief</em> donation to go towards (see bulleted examples above).</strong><br /> 
    <strong>Earmarked for <span class="required">*</span>:</strong><input type="text" name="Earmark1" id="Earmark1" size="50" /> 
</p> 

這裏是我的JS嘗試切換...

嘗試1：

function relief_fund_handler() { 

    var relief_elem = document.getElementById("Relief1"), 
     earmark_elem = document.getElementById("Earmark1"), 
     donate_elem = document.getElementById("ItemName1"); 

    if (relief_elem.checked) { 
     earmark_elem.setAttribute("style", "display: inline;");  
    } else if (".otherFund".checked) {   
     earmark_elem.setAttribute("style", "display: none;"); 
    } 
} 

嘗試2：

function relief_fund_handler() { 

    var relief_elem = document.getElementById("Relief1"), 
     earmark_elem = document.getElementById("Earmark1"), 
     donate_elem = document.getElementById("ItemName1"); 

    if (relief_elem.checked) { 
     earmark_elem.setAttribute("style", "display: inline;");  
    } else { 
     earmark_elem.setAttribute("style", "display: none;"); 
    } 
} 

嘗試3：

$("#Relief1:checked")( 
    function() { 
     $('#Earmark1').toggle(); 
    } 
); 

在嘗試＃3，我還與.click，.select，.change取代了:checked，沒有工作過......感謝您的幫助！ :)

Answer 1

如果您已經使用jQuery，這很簡單，因爲使用.show()和.hide()：

$('#Relief1').on('change',function() { 
    if($(this).is(':checked')) { 
    $('#Earmark1').show(); 
    } else { 
    $('#Earmark1').hide(); 
    } 
}); 

例如小提琴：http://jsfiddle.net/x4meB/

還要注意，不要使用重複的ID的，他們是爲了是唯一的（在這種情況下，你有p標籤和跨度dulpicate #Earmark1）。此外，在示例小提琴中，我將其更改爲複選框而不是收音機，因爲如果只有一個選項，則無法取消選中收音機。

Answer 2

試試這個：

$("input.otherFund").change(function() { 
    $('#Earmark1').toggle($(this).attr('id') == 'Relief1'); 
});​ 

Answer 3

嘗試刪除所有事件的關這樣的單選按鈕：

<input type="radio" name="ItemName1" id="Relief1" value="Daughters of Penelope Charitable Relief Fund" /> 

並使用下面的jQuery腳本：

​$(function(){ 
    $("#Relief1").change(function(){ 
     $(this).is(":checked") ? $("#Earmark1").show() : $("#Earmark1").hide(); 
    }); 
});​ 

Answer 4

嘗試：

<script> 
var r=$('input[name="ItemName1"]).is(:checked); 
if(r) 
{ 
alert("Item is checked");//replace with any code 
} 
</script> 

Answer 5

您可以通過每個單選按鈕迭代，並分配一個事件處理每個單選按鈕，所以選擇當它顯示了其他領域，並取消當它隱藏等領域。下面的代碼可以幫助你得出正確的答案。

// Iterate the radio buttons and assign an event listener 

$('input[name="ItemName1"]').each(function() { 

    // Click Handler 

    $(this).live('click', function() { 

     // Check for selected 

     if ($(this).is(':checked')) 
     { 
      $('#EarMark1').show(); 
     } 
     else 
     { 
      $('#EarMark1').hide(); 
     } 
    }); 

}); 

這並不完美，也不是最優雅的解決方案。隨着一些調整，它應該指向你在正確的方向。

Answer 6

謝謝大家！我結束了使用kennypu的例子 - 「：checked」似乎工作正常，即使它是一個單選按鈕。我不得不對它做一些調整，最終得到了2個獨立的函數，而不是「其他」。出於某種原因，其他示例並不適合我 - 儘管我非常懷疑它與您的代碼有關，並且可能與頁面中發生的其他事情有關。由於我們使用的是外部表單/數據庫處理程序，因此我們需要將事件和其他代碼保留在那裏。

這裏是結束了工作..

$(function(){ 
    $("#Relief1").change(function(){ 
    if($(this).is(":checked")) { 
     $("#Earmark1").show(); 
     } 
     }); 
    }); 

    $(function(){ 
    $("#Radio1, #Radio2, #Radio3, #Radio4, #Radio5, #Radio6, #Radio7").change(function(){ 
    if($(this).is(":checked")) { 
     $("#Earmark1").hide(); 
     } 
     }); 
    }); 

相當笨重，但我得到了它的工作，我怎麼需要的。感謝所有貢獻的人，它對我們有所幫助。