单选按钮“选择”切换问题

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

试试这个：

$("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，它们是唯一的（在这种情况下，您有一个重复的 #Earmark1 用于 p 标签和跨度）。此外，在示例小提琴中，我将其更改为复选框而不是收音机，因为如果只有一个选项，您无法取消选中收音机。