javascript - 单击时保存复选框的状态

Question

<form name="form_name" action="/" method="get">
          <% if params["title"].present?%>
            <% if params["title"] == "1" %>
            <input type="checkbox" name="title" onclick="this.form.submit();" value="1" checked> Title <input name="title" type="hidden" value="0" />
            <%else%>
            <input type="checkbox" name="title" onclick="this.form.submit();" value="1"> Title
            <%end%>

            <%else%>
             <input type="checkbox" name="title" onclick="this.form.submit();" value="1">Title
        <%end%> 
    <% if params["description"].present?%>
            <% if params["description"] == "1" %>
            <input type="checkbox" name="description" onclick="this.form.submit();" value="1" checked> Description <input name="description" type="hidden" value="0" />
            <%else%>
            <input type="checkbox" name="description" onclick="this.form.submit();" value="1"> Title
            <%end%>

            <%else%>
             <input type="checkbox" name="description" onclick="this.form.submit();" value="1">Title
        <%end%> 

    </form>

目标:拥有提交 onclick 的复选框，同时保留其他未修改的复选框的状态

我有一堆复选框，单击它们时会提交表单。单击后，它们将返回同一页面，并包含新的 GET 数据。上面的代码是一种 hack，适用于一个复选框。但由于我这样做的方式，它不适用于多个复选框。

这似乎不是这样做的方法。我相信正确的答案是使用 javascript 或 jquery 确定是否选中或取消选中复选框。我对其中任何一个都不太满意，所以如果有人能指导我正确的方向......

Answer 1

问题是多余的隐藏输入，

      <form name="form_name" action="/" method="get">
        <% if params["title"].present?%>
          <% if params["title"] == "1" %>
            <input type="checkbox" name="title" onclick="this.form.submit();" value="1" checked> Title 
          <%else%>
            <input type="checkbox" name="title" onclick="this.form.submit();" value="1"> Title
          <%end%>
        <%else%>
            <input type="checkbox" name="title" onclick="this.form.submit();" value="1">Title
        <%end%> 
        <% if params["description"].present? %>
          <% if params["description"] == "1" %>
            <input type="checkbox" name="description" onclick="this.form.submit();" value="1" checked> Description 
          <%else%>
            <input type="checkbox" name="description" onclick="this.form.submit();" value="1"> Description
          <%end%>

        <%else%>
           <input type="checkbox" name="description" onclick="this.form.submit();" value="1">Description
        <%end%> 
      </form>

如果复选框未选中，它们将提交零值，但浏览器的好处是，它不会提交未选中的复选框和 <% if params["description"].present? %>如果不检查它的值，这样的条件就会变成假。

所以删除这些冗余条件后更优化的代码是，

      <form name="form_name" action="/" method="get">
        <% if params["title"] == "1" %>
          <input type="checkbox" name="title" onclick="this.form.submit();" value="1" checked> Title 
        <%else%>
          <input type="checkbox" name="title" onclick="this.form.submit();" value="1"> Title
        <%end%>

        <% if params["description"] == "1" %>
          <input type="checkbox" name="description" onclick="this.form.submit();" value="1" checked> Description 
        <%else%>
          <input type="checkbox" name="description" onclick="this.form.submit();" value="1"> Description
        <%end%>
      </form>