让JavaScript在多个部分（Rails）上工作

Question

我目前通过link_to_add_fields函数进行部分调用：

<!-- links for adding new Questions to this QuestionSet -->
  <div class="row">
    <div class="col-sm-2">
      Add Sub-Question<br>
      • <%= link_to_add_fields "Multiple Choice", f, :questions %><br>
      • <%= link_to_add_fields "Ordered Answers", f, :ordered_questions %><br>
      • <%= link_to_add_fields "Identification", f, :matching_questions %>
    </div>
  </div>

用户点击他们想要的那个，然后渲染适当的部分。我在渲染“识别”部分时遇到问题，其中分配了JavaScript函数，但它们似乎只对第一个被调用的部分起作用，而后续的所有部分都没有响应。

<div>
  <script>
    // Fix to either edit functions or new functions working.
    // Checks if all fields are empty when the partial is rendered (new) and if true doesn't run check functions.
    // Otherwise we're on edit questionset and check functions are run.
      $(document).ready(function () {
          if(($('#img_form').val() == false) && ($('#name_form').val() == false) && ($('#desc_form').val() == false)){
              return;
          }
          else
          {
              check_name();
              check_desc();
              check_img();
          }
      });

  </script>

  <div class ="panel">
    This Question Will Contain (Minimum 2 Required): <br>
    <input type = "checkbox" name="Name" id="name_checkbox" onclick="check_name_field()"> Name
    <input type = "checkbox" name ="Description" id="description_checkbox" onclick="check_description_field()"> Description
    <input type = "checkbox" name ="Image" id="image_checkbox" onclick="check_image_field()"> Image
  </div>

  <div id="Name_Field" style="display: none">
    <%= f.text_field :body, :placeholder => "Name", :class => "form-control", :id => "name_form" %>
  </div>

  <div id="Description_Field" style="display: none">
    <%= f.text_field :description, :placeholder => "Description", :class => "form-control", :id => "desc_form"%>
  </div>

  <!-- TODO Probably not the Ruby way of doing it, look into other methods -->
  <!-- drop down list for all media for the tutor -->
  <div id="Image_Field" style="display: none">
    <%  @filepaths = Dir.glob("public/uploaded_images/#{@tutor.media_directory}/*") %>
    <%= f.collection_select :image, @filepaths, :to_s, :to_s, {:include_blank => ''}, :id => "img_form" %>
  </div>
</div>

<!-- TODO Move into JavaScript file in assets / clean up code to be less repetitive / implement JQuery -->
<script>

    var name_checkbox = document.getElementById("name_checkbox");
    var description_checkbox = document.getElementById("description_checkbox");
    var image_checkbox = document.getElementById("image_checkbox");

    var name_field = document.getElementById("Name_Field");
    var description_field = document.getElementById("Description_Field");
    var image_field = document.getElementById("Image_Field");

    function check_name_field(){
        if (name_checkbox.checked == true){
            name_field.style.display = "unset";
        }

        else if (name_checkbox.checked == false){
            name_field.style.display = "none";
        }
    }

    function check_description_field(){
        if (description_checkbox.checked == true){
            description_field.style.display = "unset";
        }

        else if (description_checkbox.checked == false){
            description_field.style.display = "none";
        }
    }

    function check_image_field(){
        if(image_checkbox.checked == true){
            image_field.style.display = "unset";
        }

        else if (image_checkbox.checked == false){
            image_field.style.display = "none";
        }
    }

    //Both functions below check to see if the relevant field has data, if so display it, otherwise keep it hidden.

    function check_name(){
        if($('#name_form').val()){
            name_checkbox.checked = true;
            name_field.style.display = "unset";
        }
    }

    function check_desc(){
        if($('#desc_form').val()){
            description_checkbox.checked = true;
            description_field.style.display = "unset";
        }
    }

    function check_img(){
        if($('#img_form').val()){
            image_checkbox.checked = true;
            image_field.style.display = "unset";
        }
    }

    function assign_id(){
        var r = Math.floor(Math.random() * 6000) + 1
        name_checkbox = document.getElementById("name_checkbox");
        description_checkbox = document.getElementById("description_checkbox");
        image_checkbox = document.getElementById("image_checkbox");

        name_checkbox.id = ("name_checkbox" + r);
        description_checkbox.id = ("description_checkbox" + r);
        image_checkbox.id = ("image_checkbox" + r);

        name_field = document.getElementById("Name_Field");
        description_field = document.getElementById("Description_Field");
        image_field = document.getElementById("Image_Field");

        name_field.id = ("Name_Field" + r);
        description_field.id = ("Description_Field" + r);
        image_field.id = ("Image_Field" + r);
    }
</script>

任何帮助都将不胜感激。