event delegate

_nav.html.erb

<!-- Button trigger modal -->
<button id="searchBtn" type="button" class="btn" data-toggle="modal" data-target="#searchModal" style="background-color: #fff; color: #000; margin: 15px; border: 0; font-size: 20px; border-radius: 0;
  position: sticky;
  z-index: 990;
  top: 0px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  ">
  <i class="fa fa-search" aria-hidden="true"></i>
</button>

<!-- Modal -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body" style="padding-top:0;">
         <div class="container">
          <%= form_tag search_posts_path, method: :get, role: "search" do |f|%>

            <div id="checkboxs" class="form-check row" style="text-align: center;">
              <label class="checkbox col-12">
                <%= check_box_tag :search, "낮부스"%> <strong>낮</strong>에도 재미난게 많다구!
              </label>
              <label class="checkbox col-12">
                <%= check_box_tag :search, "밤주점" %> 무슨소리! 축제는 <strong>밤</strong>이지~!
              </label>
              
              <label class="checkbox col-12">
                <%= check_box_tag :search, "귀여운" %>🐶&nbsp; 귀여운 컨셉 🐼
              </label>
              <label class="checkbox col-12">
                <%= check_box_tag :search, "헌팅술집" %> 혼자왔다 둘이 나가는 💑
              </label>
              <label class="checkbox col-12">
                <%= check_box_tag :search, "섹시한" %>🙈 💋
              </label>
              <label class="checkbox col-12">
                <%= check_box_tag :search, "신나는" %> 신나는 분위기 🎶
              </label>
              <label class="checkbox col-12">
                <%= check_box_tag :search, "정신나간" %> 🚨 오늘만 사는 당신은 위한 !
              </label>
            </div>

          <div class="modal-footer">
            <button type="submit" class="btn btn-block btn-round" style="color: #fff;">
              <i class="fa fa-check" aria-hidden="true"></i>
            </button>
          </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  var checkboxs = document.getElementById("checkboxs");
  checkboxs.addEventListener("click", function(e){
    var target = e.target || e.srcElement;
    if(Array.prototype.includes.call(target.classList, "checkbox")){
      target.classList.toggle("is_checked");
    }
  },true); 
})();
</script>