單選按鈕“選擇”切換問題

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，我也換成了:checked有.click ， .select ， .change ，沒有工作過......感謝您的幫助！ :)

Answer 1

嘗試這個：

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

Answer 2

嘗試像這樣從單選按鈕中刪除所有事件：

<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 3

您可以遍歷每個單選按鈕，並為每個單選按鈕分配一個事件處理程序，因此在選中時顯示其他字段，而在取消選中時隱藏其他字段。 以下代碼可以幫助您獲得正確的答案。

// 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 4

謝謝大家！！！ 我最后使用了肯尼普（Kennypu）的示例-即使是單選按鈕，“：checked”似乎也可以正常工作。 我必須對其進行一些調整，最后得到2個單獨的函數，而不是“ else”。 由於某些原因，其他示例對我不起作用-盡管我非常懷疑這與您的代碼有關，並且可能與頁面中發生的其他事情有關。 由於我們使用的是外部表單/數據庫處理程序，因此我們需要將事件和其他代碼保留在那里。

這就是最終的結果。

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

相當笨拙，但是我可以按需使用它。 感謝所有貢獻者，它提供了很多幫助。

Answer 5

嘗試：

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

Answer 6

如果你已經使用jQuery，這是簡單的使用.show()和.hide()

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

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

還要注意，不要使用重復的ID，因為它們的唯一性（在這種情況下，p標簽和跨度必須為#Earmark1 ）。 另外，在示例小提琴中，我將其更改為復選框而不是單選按鈕，因為如果只有一個選項，則無法取消選中單選按鈕。