Question

我有三个单选按钮和drupal生成的文本字段。我想要的是前两个按钮在单击时隐藏文本字段，以及最后一个单选按钮显示文本字段。（它用于选择前两个选项是标准金额而最后一个是自定义金额的金额。）

我有以下代码由drupal生成：

<div class="form-item">
 <label>Jag uppgraderar till: </label>
 <div class="form-radios"><div class="form-item" id="edit-new-amount-no-cost-wrapper">
 <label class="option" for="edit-new-amount-no-cost"><input type="radio" id="edit-new-amount-no-cost" name="new_amount" value="no_cost"   class="form-radio" /> Ingen kostnad</label>

</div>
<div class="form-item" id="edit-new-amount-rounded-wrapper">
 <label class="option" for="edit-new-amount-rounded"><input type="radio" id="edit-new-amount-rounded" name="new_amount" value="rounded"   class="form-radio" /> Avrundat upp</label>
</div>
<div class="form-item" id="edit-new-amount-other-wrapper">
 <label class="option" for="edit-new-amount-other"><input type="radio" id="edit-new-amount-other" name="new_amount" value="other"   class="form-radio" /> Annat belopp</label>
</div>
</div>
</div>
<div class="form-item" id="edit-other-amount-wrapper">
 <label for="edit-other-amount">Annat belopp:: </label>

 <input type="text" maxlength="128" name="other_amount" id="edit-other-amount" size="60" value="" class="form-text" />
</div>

我试过在jquery中使用它：

// When clicking on 1st radio button
$('#edit-new-amount-no-cost').change(function(){
  $('#edit-other-amount-wrapper').hide();
});

// When clicking on 2nd radio button
$('#edit-new-amount-rounded-cost').change(function(){
  $('#edit-other-amount-wrapper').hide();
});

// When clicking on 3rd radio button
$('#edit-new-amount-other').change(function(){
  $('#edit-other-amount-wrapper').show();
});

那不起作用。只有第3个按钮有效。

我也试过循环遍历它们（并将它们全部设置为隐藏文本字段，甚至是第3个按钮）：

$('input[type=radio]').each(function() { 
  alert('Id: '+$(this).attr('id')); // Just to see that the loop works
  $(this).change(function(){
    alert('Id: '+$(this).attr('id')); // Just to see that the function fires
    $('#edit-other-amount-wrapper').hide();
  });
});

这也不起作用。我甚至添加了一个警告框来了解点击功能何时执行。同样在这里，只有当点击第3个按钮时才会发生。

所以我的问题是：我无法为所有单选按钮设置onclick（或onchange，我也尝试过.change）。

您对如何做有任何想法吗？

亲切的问候，塞缪尔

Answer 1

第二个收音机的ID错误就像提到的kinakuta一样，但您也可能希望隐藏文本框。看看jsfiddle：http://jsfiddle.net/valanto/fShAv/

Answer 2

请在脚本标记的页面底部尝试此脚本。

$(function() {
   $("input[name='new_amount']").change(function(){
   var selected_radio = $("input[name='new_amount']:checked").val();
   if (selected_radio == 'other')   {
    $('#edit-other-amount-wrapper').show();
   }
   else{
    $('#edit-other-amount-wrapper').hide();
   }
  });
});

为什么单选按钮更改/单击功能仅适用于最后一个单选按钮？

2 个答案: