mardi 5 janvier 2016

Checkbox forms & JQuery

I'm attempting to create a very short form that will display an alert based on its checked checkbox options. (See here for my attempt - http://ift.tt/1IO42VV)

$(document).ready(function() {
// Displays options for alert if checked
    $('#mycheckbox1').change(function() {
        $('#mycheckboxdiv1').toggle();
        $('#displayAlert').toggle();
    });
// Displays alert if checked
    $('#mycheckbox2').change(function() {
        $('#transportAlert').toggle();
    });
// Adds options into Dropdown menu
    $('.box').hide();
      $('#dropdown').change(function() {
        $('.box').hide();
        $('.' + $(this).val()).show();
     });
     
});
<script src="http://ift.tt/notapP"></script>
Choose Alert
<input type="checkbox" name="mycheckbox1" id="mycheckbox1" value="0" />
<div id="mycheckboxdiv1" style="display:none">
  <form>
    <select id="dropdown" name="dropdown">
      <option value="0">-- Transport Type --</option>
      <option value="area1">Busses</option>
      <option value="area2">Trains</option>
      <option value="area3">Ferries</option>
    </select>
  </form>
  <div class="box area1">
    <form action="">
      <input type="checkbox" name="bus" value="1A"> 1A
        <br>
      <input type="checkbox" name="bus" value="1B"> 1B
        <br>
      <input type="checkbox" name="bus" value="1C"> 1C
        <br>
        <br>
      <input id="customText" type="text" name="busCustom" placeholder="Custom" />
    </form>
    
  </div>
  <div class="box area2">
    <form action="">
      <input type="checkbox" name="train" value="1A"> to London
        <br>
      <input type="checkbox" name="train" value="1B"> to Southampton
        <br>
        <br>
      <input id="customText" type="text" name="trainCustom" placeholder="Custom" />
    </form>
  </div>
  <div class="box area3">
    <form action="">
      <input type="checkbox" name="ferry" value="1A"> Isle of Wight
        <br>
        <br>
      <input id="customText" type="text" name="ferryCustom" placeholder="Custom" />
    </form>
  </div>
  
</div>

<div id="displayAlert" style="display:none">
<hr>
  <input type="checkbox" name="mycheckbox2" id="mycheckbox2" value="0" />
  <div id="mycheckboxdiv2" style="display:none">
  </div> Display Alert
</div>
<div id="transportAlert"class="alert alert-warning" role="alert" style="display:none">Please note that the .... will be running late today.</div>

For example, I'd want the alert to say "Please note that the 1A bus will be running late today." - if the 1A checkbox under Busses is the only option checked.

Similarly, "Please note that the 1A & 1B busses will be running late today." - if the 1A and 1B checkboxes under Busses are checked.

...You get the idea.

I've built the basic premise above, however I'm slightly out of my depth when trying to link the checkbox values via JS into a line of text - (and have them slightly vary dependant on number of checked boxes and type of transport)

Many thanks in advance.




Aucun commentaire:

Enregistrer un commentaire