Question

我有这个HTML代码：

<li>
    <label>
        <input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
    <div class="input-box">
        <select name="payment[ebzc_method_id]">
            <option value="">Please select...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </div>
</li>
<li>
    <label>
        <input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
    <div class="input-box">
        <select name="payment[ebzc_method_id]">
            <option value="">Please select...</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </div>
</li>

我需要使用<div class="input-box">切换已检查的广播（name="payment[ebzc_option]"）按钮旁边的prototype。

有人可以帮我这样做吗？我以前没有在prototype工作过在name="payment[ebzc_option]"

中按名称属性（prototype.js）选择单选按钮的任何提示

Answer 1

设置一个功能，您可以在页面加载时和单击单选按钮时调用它。

function setSubmenuVisibility(){
  $$('input[type="radio"]').each(function(elm){
    if(elm.up('label') && elm.up('label').next('div')){
      var sub = elm.up('label').next('div');
      if(elm.checked){
        sub.show();
      }else{
        sub.hide();
      }
     }
   });
 }
 setSubmenuVisibility();
 document.on('click', 'input[type="radio"]', function(evt, elm){
   setSubmenuVisibility();
 });

Answer 2

您可以使用Element.toggle

切换可见性

Answer 3

有很多方法可以做到这一点

<击> 如果HTML将是相同的

，您可以使用DOM遍历方法
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){ this.nextSiblings().first().toggle(); });

在这个例子中，我们使用$$()选择名称属性为payment[ebzc_option]的所有单选按钮，并使用invoke()方法调用{{1}在所有这些上。在事件处理程序observe()的闭包中是事件发生的元素，然后使用this收集所有下一个兄弟，从数组中选择nextSiblings()一个并运行{ {1}}就可以了。

这并不理想，因为它依赖于HTML结构保持不变。

让我们尝试为你要切换的div添加一个id（id需要像你发现的那样是唯一的），然后让我们将id添加到数据属性中的单选按钮。数据属性可以是您只需要以first()
开头所需的任何内容
toggle()

现在我们的观察者声明变为

data-

你甚至可以扩展观察者闭包以确保一次只打开一个div

<div class="input-box" id="input-box_saved"> <input type="radio" name="payment[ebzc_option]" value="saved" data-toggle="input-box_saved" />

编辑我错过了$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){ $(this.readAttribute('data-toggle')).toggle(); });和$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){ $$('.input-box').invoke('hide'); $(this.readAttribute('data-toggle')).show(); });不是兄弟姐妹，因为结尾<input>正在关闭框的右侧。在这种情况下，DOM遍历将更加<div>和</label>以使其工作。

使用prototype.js切换div visiblity

3 个答案: