仅在选中单选按钮时运行 javascript

Question

我想为我的 Rails 应用程序提供一些非常简单的东西：只有在选中了之前的单选按钮之一时才必须运行 javascript。我真正想要的是用户有不同的单选按钮显示给他，没有检查默认值。当他点击单选按钮下方的“运行”按钮时，有两种情况：

• 用户选中了一个单选按钮，然后运行 ​​javascript（隐藏了一个 div，显示了另一个）
• 用户没有选中单选按钮，什么也没有发生（甚至更多：浏览器告诉用户他必须选中单选按钮，但这很容易通过单选按钮中的:required => true 选项完成）李>

我试过的代码：

HTML.erb 代码

<%= form_with(model: @pdfrequest, local: true, html: {class: "form-group"}) do |f| %>

    <%= f.radio_button :my_param, 'option1' %>
    <%= label :opt1, 'option1', :value => 'option1'%>

    <%= f.radio_button :my_param, 'option2' %>
    <%= label :opt2, 'option2', :value => 'option2'%>

    <div class="row mb-3">
        <div class="col", id="to_hide">
            <%= submit_tag "Run", id: "upload_button" %>
        </div>
    </div>

    <div id="to_show">
        <p>Show me!</p>
    </div>

<% end %>

我只设法让代码在点击时工作，无论表单是否填写。

jquery 代码

$(document).on("click", "#upload_button", function() {
    $("#to_show").show();
});

$(document).on("click", "#upload_button", function() {
    $("#to_hide").hide();
});

jquery 代码位于资产文件夹中我的 application.js 中。

我希望这样的内容与我提供的 html 代码位于同一文件中：

预期答案

<% if form_with.filled %>
    $(document).on("click", "#upload_button", function() {
        $("#to_show").show();
    });

    $(document).on("click", "#upload_button", function() {
        $("#to_hide").hide();
    });
<% end %>

我发现了一些与此问题密切相关的其他问题，但每次，条件都是对象上的“简单”条件，但与表单本身无关。

我正在使用 Rails 5.2.3 和 jquery 3.2.1

谢谢。

编辑

感谢这个问题：Find out whether radio button is checked with JQuery?，我进步了。

HTML.erb 代码

<%= form_with(model: @pdfrequest, local: true, html: {class: "form-group"}) do |f| %>

    <%= f.radio_button :my_param, 'option1', :id => 'button_check' %>
    <%= label :opt1, 'option1', :value => 'option1'%>

    <%= f.radio_button :my_param, 'option2', :id => 'button_check' %>
    <%= label :opt2, 'option2', :value => 'option2'%>

    <div class="row mb-3">
        <div class="col", id="to_hide">
            <%= submit_tag "Run", id: "upload_button" %>
        </div>
    </div>

    <div id="to_show">
        <p>Show me!</p>
    </div>

<% end %>

jquery 代码

$(document).on("click", "#upload_button", function() {
    if($('#button_check').is(':checked')) {
        $("#to_show").show();
    }
});

$(document).on("click", "#upload_button", function() {
    if($('#button_check').is(':checked')) {
        $("#to_hide").hide();
    }
});

所以现在，当没有选中任何按钮时，它不会执行 jquery，但即使选中了单选按钮，它也不会执行，但我无法弄清楚我做错了什么。

Answer 1

您的第二次尝试更接近，但为了执行两个单选按钮，必须检查它们，因为它们具有相同的 id。尝试添加一个名称字段并使用它：

if($("input:radio[name='name_here']").is(":checked")){

}

如果输入中的所有项目都未选中，这将返回 FALSE，如果选中一个项目，则返回 TRUE。