如何在 HTML 表单中提交多个复选框？

Question

这是一个学校项目，目前我只知道 Ruby、Sinatra、HTML 和 CSS。我在网上查看过，但只遇到了 PHP 和 Javascript 指令（我不应该使用它们）。

我有一个复选框表单，虽然我可以勾选多个，但只有一个复选框值被发布。我如何获得它以便所有已选中的都通过？

此外，每个州的“缩写”都为零。我在表格中做错了吗？如果有的话，它只是使用其中一个缩写并将其添加到每个州。最后，我该如何做到这一点，以便复选框仍然选中用户过去已经添加的状态？

这里有一些代码：

<form method="POST" action="/states">
<h3>Northeast:</h3> <br>
<input type="checkbox" name="state_name" value="Connecticut" name="abbreviation" value="CT"> Connecticut<br>
<input type="checkbox" name="state_name" value="Deleware" name="abbreviation" value="DE"> Deleware <br>
<input type="checkbox" name="state_name" value="Maine" name="abbreviation" value="ME"> Maine<br>
<input type="checkbox" name="state_name" value="Maryland" name="abbreviation" value="MD"> Maryland<br>

require 'pry'
class StatesController < ApplicationController

  get '/states' do
    if logged_in?
        @user = current_user
        @states = current_user.states
      erb :'states/states'
    else
      redirect to '/login'
    end
  end


  get '/states/new' do
    if logged_in?
      erb :'/states/create'
    else
      redirect to '/login'
    end
  end

  post '/states' do
      if logged_in? && params[:state_name] != ""
        @state = State.create(:state_name => params[:state_name], :abbreviation => params[:abbreviation])
        # binding.pry
        @state.users << current_user
          if @state.errors.any?
              "Error, try again"
          else
            redirect "/states"
          end
      else
        redirect to "/states/new"
      end
    end


  get '/states/:id' do
    if logged_in?
      @state = State.find_by_id(params[:id])

        if @state != nil
          erb :'/states/show'
        else
          redirect to '/states'
        end
    else
      redirect to '/login'
    end
  end


  get '/states/:id/edit' do
    if logged_in?
      @state = State.find_by_id(params[:id])
      if @state && current_user
        erb :'states/edit'
      else
        redirect to '/states'
      end
    else
      redirect to '/login'
    end
  end


    patch '/states/:id' do
      @state = State.find_by_id(params[:id])
        if params[:state_name] != "" && @state.update(:state_name => params[:state][:state_name])
          @state.update(:state_name => params[:state][:state_name])
          redirect to "/states/#{@state.id}"
        else
          redirect to "/states/#{@state.id}/edit"
        end
    end

    delete '/states/:id/delete' do
      if logged_in?
        @state = State.find_by_id(params[:id])
          if @state && current_user
              @state.destroy
          end
        redirect to '/states'
      else
        redirect to '/login'
      end
  end
end

Answer 1

您需要将[] 附加到您的名称属性以支持数组值，即多个检查值：

<input type="checkbox" name="state_name[]" value="Connecticut"> Connecticut<br>
<input type="checkbox" name="state_name[]" value="Deleware"> Deleware<br>
<input type="checkbox" name="state_name[]" value="Maine"> Maine<br>
<input type="checkbox" name="state_name[]" value="Maryland"> Maryland<br>

现在在您的服务器上，您将看到选中的值为state_name: ['Connecticut', 'Maine', ...]。

注意：您为每个复选框指定了两次name 和value 属性。我正在使用第一个。

Answer 2

我一直都知道，在 html 表单中，id 和名称必须是唯一的，除非您使用单选按钮或在这种情况下使用复选框。您的代码似乎有点过头了，这意味着您在每个复选框上有 2 个名称和 2 个值，并且它们中的最后一个都可以使用，所以不要这样：

<input type="checkbox" name="state_name" value="Connecticut" name="abbreviation" value="CT"> Connecticut<br>

尝试仅具有以下属性之一：

<input type="checkbox" name="abbreviation" value="CT"> Connecticut<br />

通常，in 对于 php，我们会在名称末尾附加一个“[]”，您将收到一个包含已检查值的数组。但是由于您使用的是我有点熟悉的 ruby​​，所以我看到 ruby​​ 开发人员喜欢在他们的代码中更具表现力，有时他们会这样做：

<input type="checkbox" name="abbreviation[city_1]" value="CT">Connecticut<br />
<input type="checkbox" name="abbreviation[city_2]" value="DE">Delaware<br />

等等。

你可以看到一个例子，here，尽管我相信你可以用空的 '[]' 来做，但是你知道我被告知这是 php-ish 的方法.

干杯！

Answer 3

每个输入只使用一个名称和值，例如：

<input type="checkbox" name="state_name" value="CT"> Connecticut<br><input type="checkbox" name="state_name" value="DE"> Deleware <br><input type="checkbox" name="state_name" value="ME"> Maine<br><input type="checkbox" name="state_name" value="MD"> Maryland

检查您的 POST 数组中的 state_name，它们应该是所有选中复选框的数组。