Question

我正在尝试创建一个非常简单的脚本，检查是否单击了某个单选按钮选项，如果是，则显示另一组字段（这样可以正常工作），但是如果取消选择该单选按钮选项，它隐藏了额外的字段（看似简单，但对我不起作用！）

另外我对JS / JQuery很新，所以调试这个很难！感谢您的帮助:)）

我的HTML单选按钮触发字段显示 - 想象有其他6个单选按钮选项（每个分类为[class =＆＃34; otherFund＆＃34;]）。

<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标签和span有一个愚蠢的#Earmark1）。此外，在示例小提琴中，我将其更改为复选框而不是收音机，因为如果只有一个选项，则无法取消选中收音机。

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

6 个答案: