0

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

另外我对 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

4

6 回答 6

1

尝试这个：

$("input.otherFund").change(function() {
    $('#Earmark1').toggle($(this).attr('id') == 'Relief1');
});​
于 2012-12-21T21:33:35.427 回答
1

尝试从单选按钮中删除所有事件，如下所示：

<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();
    });
});​
于 2012-12-21T21:33:55.117 回答
0

You could iterate through each radio button and assign an event handler to each radio button, so when selected it shows the other fields and when deselected it hides the other fields. 下面的代码可以帮助您得出正确的答案。

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

});

它并不完美，也不是最优雅的解决方案。通过一些调整，它应该为您指明正确的方向。

于 2012-12-21T21:42:52.820 回答
0

谢谢大家！！！我最终使用了 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();
      }
      });
    });

相当笨重，但我让它按我的需要工作。感谢所有贡献的人，它帮助了很多。

于 2012-12-27T17:46:06.340 回答
-1

尝试：

<script>
var r=$('input[name="ItemName1"]).is(:checked);
if(r)
{
alert("Item is checked");//replace with any code
}
</script>
于 2012-12-21T21:38:03.407 回答
-2

如果您已经在使用 jQuery，这就像使用.show()and一样简单.hide()：

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

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

另请注意，不要使用重复的 ID，它们是唯一的（在这种情况下，您有一个重复#Earmark1的 p 标签和跨度）。此外，在示例小提琴中，我将其更改为复选框而不是收音机，因为如果只有一个选项，您无法取消选中收音机。

于 2012-12-21T21:36:36.810 回答