javascript - 如何使用复选框显示表单的更多选项并更改表单的action属性？

Question

您好，我正在创建一个网站，其中包含一个搜索房间的表单。我想将其设置为一个复选框，单击时显示新选项并更改表单的 action =""属性。

<form class="form-horizontal" action="reservation?action=listRooms" method="POST">
    <label for="">Date </label>
    <div class="datepicker ll-skin-nigran hasDatepicker">
        <input class="form-control" type="text" placeholder="14/03/2016" name="dateReservation" id="date" required="required"/>
    </div>
    <br />
    <div>
    <input type="checkbox" name="choice-for" id="choice-form">
    <label for="choice-for">Show More Options.</label>
    <div class="reveal-if-active">
    <label for="">Slots</label>
    <select name="slot" name ="slot" id="slot" >
        <option value="">Choose a slot </option>
        <option value="8h-9h30">8h00-9h30</option>
        <option value="9h30-11h">9h30-11h00</option>
        <option value="11h-12h30h">11h00-12h30h</option>
        <option value="12h30-14h">12h30-14h00</option>
        <option value="14h-15h30">14h00-15h30</option>
        <option value="15h30-17h">15h30-17h00</option>
        <option value="17h-18h30">17h00-18h30</option>
    </select>
    <br />
    <label for="">Display Screens</label>
    <input class="form-control" type="text" placeholder=" 26 pouces" name="screen" id="screen" />
    <br />
    <label for="">CPU</label>
    <input class="form-control" type="text" placeholder="Intel Core i5 " name="processor" id="processor" />
    <br />
    <label for="">RAM</label>
    <input class="form-control" type="text" placeholder=" 2Go de RAM ?" name="ram" id="ram" />
    <br />
    <input type="submit" value="Réserver" class="btn btn-primary" />
    </div>

然后我尝试使用 javascript(JQuery) 脚本来满足我的期望:

<script>
    $(function() {
        $( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
    });

    $("#choice-form").change(function() {
      //there i need to know when the checkbox is changed dynamically so the attribute can change too.
      $("#form-horizontal).attr("reservation?action=listRooms");
    });

    var FormStuff = {

    init: function() {
        this.applyConditionalRequired();
        this.bindUIActions();
     },

      bindUIActions: function() {
        $("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
      },

      applyConditionalRequired: function() {

        $(".require-if-active").each(function() {
          var el = $(this);
          if ($(el.data("require-pair")).is(":checked")) {
            el.prop("required", true);
          } else {
            el.prop("required", false);
          }
        });

      }

    };

    FormStuff.init();
</script>

Answer 1

试试这个:

$("#choice-form").change(function() {

  // If checkbox checked
  if ( $('#choice-form').is(':checked') ) {
     // Set new form action
     $('#form-horizontal').attr('action', 'reservation?action=listRooms');
     // Reveal additional options
     $('.reveal-if-active').show(); // or call .css() with appropriate options
  }
});