Изменить параметр css c помощью js

377

11 января 2017, 03:17

Я делаю небольшой календарь событий. Есть формы для ввода события, его описания, ввода даты и времени начала и даты и времени конца. Для однодневного события я добавил checkbox, при нажатии на который форма для ввода даты и времени конца должна скрываться, и появляться по снятию галочки.
Вот код формы:

<%= form_for(event) do |f| %>
  <div class="field">
    <%= f.label :Событие %>
    <%= f.text_field :event %>
  </div>
  <div class="field">
    <%= f.label :Описание %>
    <%= f.text_field :content %>
  </div>
  <div class="checkbox">
    <%= check_box_tag(:one_day)%>
    <%= label_tag("однодневное")%>
  </div>
  <div class="field">
    <%= f.label :Дата_начала %>
    <%= f.date_field :date_start %>
    <%= f.time_field :time_start %>
  </div>
  <div class="field" id="datetime_end" style="display:done;">
    <%= f.label :Дата_конца %>
    <%= f.date_field :date_end %>
    <%= f.time_field :time_end %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Answer 1

var oneday = document.getElementById("oneday") 
oneday.addEventListener('change', function(event) { 
  if (oneday.checked) { 
    document.getElementById("datetime_start").style.display = 'none'; 
    document.getElementById("datetime_end").style.display = 'none'; 
  } else { 
    document.getElementById("datetime_start").style.display = ''; 
    document.getElementById("datetime_end").style.display = ''; 
  } 
});

<div class="field"> 
  <lable>Event</lable> 
  <input type="text"> 
</div> 
 
<div class="field"> 
  <lable>Описание</lable> 
  <input type="text"> 
</div> 
 
<div class="checkbox"> 
  <lable>однодневное</lable> 
  <input type="checkbox" id="oneday"> 
</div> 
 
<div class="field" id="datetime_start"> 
  <lable>Дата_начала</lable> 
  <input type="date"> 
  <input type="date"> 
</div> 
 
<div class="field" id="datetime_end"> 
  <lable>Дата_конца</lable> 
  <input type="date"> 
  <input type="date"> 
</div> 
 
<div class="actions"> 
  <input type="submit" value="submit"> 
</div>

Answer 2

С использованием jQuery:

$('input[type=checkbox]').click(function() { 
    $("#datetime_end").toggle(this.unchecked); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" id="isOneDay"/> 
<div id="datetime_end" > 
  сontent 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Порядок потока селекторов в css

Каким образом здесь зависит порядок селекторов? Переход не работает если поставить класс перехода первым https://jsfiddlenet/7u5z943r/ Какая разница?...

375

javascript