Skip to main content
Traer código a la pregunta en sí y hacerlo ejecutable. Quitar texto innecesario de la pregunta
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Tengo la siguiente duda:3 checkbox, los cuales seleccionas opcional 3 casillas. Si selecciono uno de ellos y lo desactivo debido a que no deseo esa opción porque quizá me equivoqué, me manda un mensaje de que debo seleccionar un horario.

Tengo 3 Checkbox. Los cuales seleccionas opcional 3 casillas. Si selecciono uno de ellos y lo desactivo debido a que no deseo esa opción porque quizá me equivoque, me manda un mensaje de que debo seleccionar un horario. Quisiera saber como lecómo lo puedo hacer, si selecciono una segunda o tercera opción y después ya no la quiero, que no me reserve nada en javascriptJavaScript y no me mande mensaje de que debo seleccionar una fecha y hora. Aquí dejo mi Fiidle. Gracias.

Éste es mi código (también disponible en FiidleJSFifdle):

<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet" type="text/css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<script type="text/javascript">
  function showContent() {
    element = document.getElementById("content");
    check = document.getElementById("pase_de_entrada");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#time').val() === '' || $('#date').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR HORA Y FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date").value = "";
      document.getElementById("time").value = "";
    }
  }

</script>
<script type="text/javascript">
  function showContent1() {
    element = document.getElementById("content1");
    check = document.getElementById("pase_de_salida");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#time2').val() === '' || $('#date2').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR HORA Y FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date2").value = "";
      document.getElementById("time2").value = "";
    }
  }

</script>
<script type="text/javascript">
  function showContent2() {
    element = document.getElementById("content2");
    check = document.getElementById("falta_dia");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#date3').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR LA FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date3").value = "";
    }
  }

</script>

<body>
  <div class="container">
    <div class="inner-bg">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 col-sm-offset-2 text">
          </div>
        </div>
        <div class="row">
          <div class="col-lg-offset-1 col-xs-12 col-lg-10 form-box">
            <div class="form-bottom">
              <form role="form" class="login-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" id="login-form">
                <fieldset class="form-group row">
                  <label class="col-sm-2">Goce de Primas</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios1" value="Con goce de primas" checked>Con Goce de Primas</label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios2" value="Sin goce de primas">Sin Goce de Primas</label>
                    </div>
                  </div>
                  <label class="col-sm-2">Tipo de Pase</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_entrada" type="checkbox" name="chk[]" value="Pase de entrada" onchange="javascript:showContent()" /> Pase de Entrada </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_salida" type="checkbox" name="chk[]" value="Pase de salida" onchange="javascript:showContent1()" /> Pase de Salida </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="falta_dia" type="checkbox" name="chkfalta" value="Falta todo el dia" onchange="javascript:showContent2()" /> Falta </label>
                    </div>
                  </div>
                  <script type="text/javascript">
                    $('form').submit(function(e) {
                      if ($('input[type=checkbox]:checked').length === 0) {
                        e.preventDefault();
                        alert('DEBES SELECCIONAR EL TIPO DE PASE(S)');
                      }
                    });

                  </script>
                </fieldset>
                <!--Zona del Calendario-->
                <div id="content" style="display: none;">
                  <div class="form-group row">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Entrada</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: "dd/mm/yyyy",
                          startDate: "-9d",
                          clearBtn: true,
                          language: "es",
                          forceParse: false,
                          daysOfWeekDisabled: "0",
                          autoclose: true,
                          todayHighlight: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time" value="" readonly="readonly">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    </div>
                    <script type="text/javascript" src="files/clockpicker/src/clockpicker.js"></script>
                    <link rel="stylesheet" href="files/clockpicker/src/clockpicker.css" />
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content1" style="display: none;">
                  <div class="form-group row" id="div2">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Salida</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date2" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time2" value="" readonly="readonly">
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                      </span>
                    </div>
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content2" style="display: none;">
                  <div class="form-group row" id="div3">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha del</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Al </label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]'); //our date input has the name "date"

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,

                        };
                        date_input.datepicker(options);
                      })

                    </script>
                  </div>
                </div>
                <button type="submit" class="btn" id="btn-formulario" name="enviar" value="enviar">Aceptar</button>
              </form>
              <button type="submit" class="btn" id="btn-cancelar" name="cancelar" value="cancelar">Cancelar</button>
              <script type="text/javascript">
                document.getElementById("btn-cancelar").onclick = function() {
                  location.href = "menu.php";
                };

              </script>
            </div>
          </div>
        </div>
      </div>
    </div>

Tengo la siguiente duda:

Tengo 3 Checkbox. Los cuales seleccionas opcional 3 casillas. Si selecciono uno de ellos y lo desactivo debido a que no deseo esa opción porque quizá me equivoque, me manda un mensaje de que debo seleccionar un horario. Quisiera saber como le puedo hacer, si selecciono una segunda o tercera opción y después ya no la quiero, que no me reserve nada en javascript y no me mande mensaje de que debo seleccionar una fecha y hora. Aquí dejo mi Fiidle. Gracias.

Fiidle

Tengo 3 checkbox, los cuales seleccionas opcional 3 casillas. Si selecciono uno de ellos y lo desactivo debido a que no deseo esa opción porque quizá me equivoqué, me manda un mensaje de que debo seleccionar un horario.

Quisiera saber cómo lo puedo hacer, si selecciono una segunda o tercera opción y después ya no la quiero, que no me reserve nada en JavaScript y no me mande mensaje de que debo seleccionar una fecha y hora.

Éste es mi código (también disponible en JSFifdle):

<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700" rel="stylesheet" type="text/css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

<script type="text/javascript">
  function showContent() {
    element = document.getElementById("content");
    check = document.getElementById("pase_de_entrada");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#time').val() === '' || $('#date').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR HORA Y FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date").value = "";
      document.getElementById("time").value = "";
    }
  }

</script>
<script type="text/javascript">
  function showContent1() {
    element = document.getElementById("content1");
    check = document.getElementById("pase_de_salida");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#time2').val() === '' || $('#date2').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR HORA Y FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date2").value = "";
      document.getElementById("time2").value = "";
    }
  }

</script>
<script type="text/javascript">
  function showContent2() {
    element = document.getElementById("content2");
    check = document.getElementById("falta_dia");
    if (check.checked) {
      element.style.display = 'block';
      $('form').submit(function(e) {
        if ($('#date3').val() === '') {
          e.preventDefault();
          alert('DEBES SELECCIONAR LA FECHA');
        }
      });
    } else {
      element.style.display = 'none';
      document.getElementById("date3").value = "";
    }
  }

</script>

<body>
  <div class="container">
    <div class="inner-bg">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 col-sm-offset-2 text">
          </div>
        </div>
        <div class="row">
          <div class="col-lg-offset-1 col-xs-12 col-lg-10 form-box">
            <div class="form-bottom">
              <form role="form" class="login-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" id="login-form">
                <fieldset class="form-group row">
                  <label class="col-sm-2">Goce de Primas</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios1" value="Con goce de primas" checked>Con Goce de Primas</label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="goce_de_primas" id="gridRadios2" value="Sin goce de primas">Sin Goce de Primas</label>
                    </div>
                  </div>
                  <label class="col-sm-2">Tipo de Pase</label>
                  <div class="col-sm-3">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_entrada" type="checkbox" name="chk[]" value="Pase de entrada" onchange="javascript:showContent()" /> Pase de Entrada </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="pase_de_salida" type="checkbox" name="chk[]" value="Pase de salida" onchange="javascript:showContent1()" /> Pase de Salida </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="falta_dia" type="checkbox" name="chkfalta" value="Falta todo el dia" onchange="javascript:showContent2()" /> Falta </label>
                    </div>
                  </div>
                  <script type="text/javascript">
                    $('form').submit(function(e) {
                      if ($('input[type=checkbox]:checked').length === 0) {
                        e.preventDefault();
                        alert('DEBES SELECCIONAR EL TIPO DE PASE(S)');
                      }
                    });

                  </script>
                </fieldset>
                <!--Zona del Calendario-->
                <div id="content" style="display: none;">
                  <div class="form-group row">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Entrada</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: "dd/mm/yyyy",
                          startDate: "-9d",
                          clearBtn: true,
                          language: "es",
                          forceParse: false,
                          daysOfWeekDisabled: "0",
                          autoclose: true,
                          todayHighlight: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time" value="" readonly="readonly">
                      <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    </div>
                    <script type="text/javascript" src="files/clockpicker/src/clockpicker.js"></script>
                    <link rel="stylesheet" href="files/clockpicker/src/clockpicker.css" />
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content1" style="display: none;">
                  <div class="form-group row" id="div2">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha a Justificar Salida</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date2" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]');

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,
                        };
                        date_input.datepicker(options);
                      })

                    </script>
                    <!--Zona del Hora -->
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="hora_justificar">Hora a Justificar</label>
                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                      <input type="text" class="form-control" name="time[]" id="time2" value="" readonly="readonly">
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                      </span>
                    </div>
                    <script type="text/javascript">
                      $('.clockpicker').clockpicker();
                      var time_input = $('input[name="time[]"]');

                    </script>
                  </div>
                </div>
                <div id="content2" style="display: none;">
                  <div class="form-group row" id="div3">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
                    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Fecha del</label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <label class="col-xs-12 col-sm-6 col-md-2 col-form-label" for="fecha_justificar">Al </label>
                    <div class="col-md-4">
                      <input class="form-control" id="date3" name="date[]" type="text" value="" readonly="readonly" />
                    </div>
                    <script>
                      $(document).ready(function() {
                        var date_input = $('input[name="date[]"]'); //our date input has the name "date"

                        var options = {
                          format: 'dd/mm/yyyy',
                          container: container,
                          todayHighlight: true,
                          autoclose: true,

                        };
                        date_input.datepicker(options);
                      })

                    </script>
                  </div>
                </div>
                <button type="submit" class="btn" id="btn-formulario" name="enviar" value="enviar">Aceptar</button>
              </form>
              <button type="submit" class="btn" id="btn-cancelar" name="cancelar" value="cancelar">Cancelar</button>
              <script type="text/javascript">
                document.getElementById("btn-cancelar").onclick = function() {
                  location.href = "menu.php";
                };

              </script>
            </div>
          </div>
        </div>
      </div>
    </div>

Origen Enlace

Conflicto con condicion en JavaScript

Tengo la siguiente duda:

Tengo 3 Checkbox. Los cuales seleccionas opcional 3 casillas. Si selecciono uno de ellos y lo desactivo debido a que no deseo esa opción porque quizá me equivoque, me manda un mensaje de que debo seleccionar un horario. Quisiera saber como le puedo hacer, si selecciono una segunda o tercera opción y después ya no la quiero, que no me reserve nada en javascript y no me mande mensaje de que debo seleccionar una fecha y hora. Aquí dejo mi Fiidle. Gracias.

Fiidle