Question

我有3个单选按钮和3个div，如：

<%= radio_button_tag('radioButton','1')%>
<%= radio_button_tag('radioButton','2')%>
<%= radio_button_tag('radioButton','3')%>

<div id="div1"  style="display: none;">div1</div>
<div id="div2"  style="display: none;">div2</div>
<div id="div3"  style="display: none;">div3</div>

我是rails的新手。我想在点击第一个radibutton时显示div1，在点击第二个radibutton时显示div2，在点击第三个radibutton时显示div3。

我可以在ASP.NET中轻松完成，但我如何在ROR中完成它。我可以在不使用JavaScript或ajax的情况下实现这一目标。

Answer 1

很简单：

使用以下代码制作js文件：

$(function() {
    var checkbox = document.getElementById('radioButton');
    var delivery_div = document.getElementById('div1');
    var showHiddenDiv = function(){
        if(checkbox.checked) {
            delivery_div.style['display'] = 'block';
        } else {
            delivery_div.style['display'] = 'none';
        }
    }
    checkbox.onclick = showHiddenDiv;
    showHiddenDiv();
});

Answer 2

如果你想在点击收音机时隐藏其他div，你可以试试这个：

您的视图模板不会改变任何内容：

<%= radio_button_tag('radioButton','1') %>
<%= radio_button_tag('radioButton','2') %>
<%= radio_button_tag('radioButton','3') %>

<div id="div1" style="display: none;">div1</div>
<div id="div2" style="display: none;">div2</div>
<div id="div3" style="display: none;">div3</div>

在你的javascript文件中，让我们说application.js（请注意，如果你包含在那个中，所有单选按钮都会有这种行为......你可以使用一个类并仅绑定该类）

$(function() {
  $(document).on("click","input[type=radio]", function() {
    var id = "#div"+$(this).val();
    $(id).show(); // display associated div
    $("div[id^='div']:not(" + id + ")").hide() // hide the others
  })
});

如何使用radio_button_tag隐藏div

2 个答案: