Jump to content
Articulando

Evento de manipulação em checkbox com javascript

Recommended Posts

Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.

 

o código atual está assim:

 

<script type="text/javascript">
            (function(){
                "use strict";
                var marcados = 0;
                var verifyCheckeds = function($checks) {
                    if( marcados>=2 ) {
                        loop($checks, function($element) {
                            $element.disabled = $element.checked ? '' : 'disabled';
                        });
                    } else {
                        loop($checks, function($element) {
                            $element.disabled = '';
                        });
                    }
                };
                var loop = function($elements, cb) {
                    var max = $elements.length;
                    while(max--) {
                        cb($elements[max]);
                    }
                }
                var count = function($element) {
                    return $element.checked ? marcados + 1 : marcados - 1;
                }
                window.onload = function(){
                    var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                    loop($checks, function($element) {
                        $element.onclick = function(){
                            marcados = count(this);
                            verifyCheckeds($checks);
                        }
                        if($element.checked) marcados = marcados + 1;
                    });
                    verifyCheckeds($checks);
                }
            }());
        </script>

 

 

Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By brendow
      Pessoal, preciso urgentemente de fazer um relatório, mas não consigo fazer de jeito nenhum... Será que poderiam me ajudar?
       
      Possuo a tabela geral tb_turg que guarda os registros assim:
       
      idmodg: 13 (codigo do módulo)
      codturg: 101 (código da turma)
      iniclasg: 2020-01-13 (data de inicio)
      terclasg: 2020-02-21 (data de termino)
      weekg: 1,3,5 (dias da semana que tem curso, neste caso: segunda, quarta e sexta)
       
      Cada aluno possui uma tabela. O aluno id 1 possui a tabela tb_z1 e guarda os registros assim:
       
      idcur      | codtur               | diafrq
      13           | 101                     | 2020-01-13
      13           | 101                     | 2020-01-17
      13           | 101                     | 2020-01-20
      13           | 101                     | 2020-01-22
      13           | 101                     | 2020-01-29
      13           | 101                     | 2020-01-31
      13           | 101                     | 2020-02-03
      13           | 101                     | 2020-02-05
      13           | 101                     | 2020-02-07
      etc...
       
      Como calcular:
      Quantos dias e quais os dias da tabela tb_turg da data de inicio (iniclasg) até a data de término (terclasg), mas somente nos dias especificados na semana (weekg), que seriam
       
      2020-01-13, 2020-01-15, 2020-01-17,
      2020-01-20, 2020-01-22, 2020-01-24,
      2020-01-27, 2020-01-29, 2020-01-31,
      2020-02-03, 2020-02-05, 2020-02-07,
      2020-02-10, 2020-02-12, 2020-02-14,
      2020-02-17, 2020-02-19, 2020-02-21,
      Daria: 18 DIAS
       
      Quantos dias de frequência teve o aluno id 1
      09 DIAS (por exemplo)
       
      Obtido os dados, deve-se verificar:
      Quantos dias de FALTA obteve o aluno id 1?
       
      Preciso gerar um relatório passando o código do módulo (13) e o código da turma (101) via GET. Alguém pode me ajudar? Obrigado
      Seria mais ou menos assim que deveria ficar (imagem anexo)

    • By marirocha95
      Olá pessoal, boa tarde.
       
      Alguém pode me ajudar no formulário PHP abaixo.
      Eu não entendo quase nada de programação, peguei um template HTML5 gratuito na internet, e meu formulário não está funcionando.
      Um colega me enviou o formulário php abaixo, mas não consegui editar.
       
      Obrigada!
       
      CONTÉM DENTRO DO ARQUIVO: index.html

            <div class="contact-form">
              <div class="container">
                <div class="section-header">          
                  <h2 class="section-title">Contato</h2>
                  <span>Contato</span>
                  <p class="section-subtitle">Entre em contato comigo adorarei te ajudar com o seu projeto.</p>
                </div>
                <div class="row">          
                  <div class="col-lg-9 col-md-9 col-xs-12">
                    <div class="contact-block">
                      <form id="contactForm">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <input type="text" class="form-control" id="name" name="name" placeholder="Seu nome" required data-error="Por favor insira seu nome">
                              <div class="help-block with-errors"></div>
                            </div>                                 
                          </div>
                          <div class="col-md-6">
                            <div class="form-group">
                              <input type="text" placeholder="Seu e-mail" id="email" class="form-control" name="name" required data-error="Por favor insira seu e-mail">
                              <div class="help-block with-errors"></div>
                            </div> 
                          </div>
                          <div class="col-md-12">
                            <div class="form-group">
                              <input type="text" placeholder="Assunto" id="msg_subject" class="form-control" required data-error="Por favor insira o assunto">
                              <div class="help-block with-errors"></div>
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="form-group"> 
                              <textarea class="form-control" id="message" placeholder="Sua mensagem" rows="7" data-error="Digite a sua mensagem" required></textarea>
                              <div class="help-block with-errors"></div>
                            </div>
                            <div class="submit-button">
                              <button class="btn btn-common btn-effect" id="submit" type="submit">Enviar mensagem</button>
                              <div id="msgSubmit" class="h3 hidden"></div> 
                              <div class="clearfix"></div> 
                            </div>
                          </div>
                        </div>            
                      </form>
                    </div>
                  </div>
      -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                     CONTÉM DENTRO DO ARQUIVO JAVA SCRIPT: contact-form-script.js
       
      $("#contactForm").validator().on("submit", function (event) {
          if (event.isDefaultPrevented()) {
              // handle the invalid form...
              formError();
              submitMSG(false, "Você preencheu o formulário corretamente?");
          } else {
              // everything looks good!
              event.preventDefault();
              submitForm();
          }
      });

      function submitForm(){
          // Initiate Variables With Form Content
          var name = $("#name").val();
          var email = $("#email").val();
          var msg_subject = $("#msg_subject").val();
          var message = $("#message").val();

          $.ajax({
              type: "POST",
              url: "php/form-process.php",
              data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
              success : function(text){
                  if (text == "success"){
                      formSuccess();
                  } else {
                      formError();
                      submitMSG(false,text);
                  }
              }
          });
      }
      function formSuccess(){
          $("#contactForm")[0].reset();
          submitMSG(true, "Message Submitted!")
      }
      function formError(){
          $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
              $(this).removeClass();
          });
      }
      function submitMSG(valid, msg){
          if(valid){
              var msgClasses = "h3 text-center tada animated text-success";
          } else {
              var msgClasses = "h3 text-center text-danger";
          }
          $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
      }
       

               -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                     CONTÉM DENTRO DO ARQUIVO PHP: form-process.php
       
      <? 
      $pmensagem = "----\r\n"; 
      foreach ($_POST as $pcampo => $pvalor) { $pmensagem .= strtoupper($pcampo) . " : " . $pvalor . "\r\n\r\n"; } 
      // NAO ALTERE OS DADOS ACIMA 
      # ALTERE OS DADOS ABAIXO 
      // endereco do servidor de smtp de seu site 
      $smtp_servidor = "mail.seudominio.com.br";  
        
      // conta de email que vai autenticar no servidor de smtp 
      $smtp_email = "mail.seudominio.com.br"; 
      // senha da conta de email que vai autenticar no servidor de smtp 
      $smtp_senha = "SenhaDoEmail"; 
      // conta de email que vai receber as informacoes digitadas no formulario 
      $emaildedestino = "email@seudominio.com.br";
      $message = "Nome: $name\n\nE-mail: $email\n\nAssunto: $msg_subject\n\nMensagem: $message";
      mail("$msg");
      // NAO ALTERE OS DADOS ABAIXO 
      $pmensagem .= "----\r\n"; 
      $pmensagem .= "Sender-IP: ".$_SERVER["REMOTE_ADDR"]."\r\n"; 
      $cMail = new COM("Persits.MailSender"); 
      $cMail->Host = $smtp_servidor; 
      $cMail->Username = $smtp_email; 
      $cMail->Password = $smtp_senha; 
      $cMail->From = $emaildedestino; 
      $cMail->FromName = "Mariana Santos"; 
      $cMail->AddAddress($emaildedestino); 
      $cMail->Subject = "CONTATO VIA FORMULARIO DO SITE: ".$_SERVER["HTTP_HOST"];
      $cMail->Body = $pmensagem; 
      $urldestino=$urlfalha; 
      if (strpos($_SERVER["HTTP_REFERER"],$_SERVER["HTTP_HOST"])) { if ($cMail->Send()) { $urldestino=$urlsucesso; } } 
      // NAO ALTERE OS DADOS ACIMA 
      ?>
    • By adriano.eurich
      cadastro.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <form action="banco_de_dados/create.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 1px;"> <legend><!--<img src="imagens/CadCli.png" alt="[imagem]" style="width:40x; height:40px">--></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Nome --> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input type="text" name="nome" id="nome" maxlength="40" required autofocus> <label for="nome">Nome</label> </div> <!-- Campo Instituição --> <div class="input-field col s12"> <i class="material-icons prefix">account_balance</i> <input type="text" name="inst" id="inst" maxlength="40" required autofocus> <label for="inst">Instituição</label> </div> <!-- Campo Telefone --> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input type="text" name="telefone" id="telefone" maxlength="13" required> <label for="telefone">Telefone</label> </div> <!-- Campo Chave --> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input type="text" name="chave" id="chave" maxlength="4" required> <label for="chave">Chave</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="cadastrar" class="btn blue"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/script.inc.php';?> ------------------------- create.php <?php session_start(); include_once 'conexao.php'; $id = $_POST [ 'id' ]; $nome = $_POST [ 'nome' ]; $inst = $_POST [ 'inst' ]; $data = date('y-m-d'); $telefone = $_POST [ 'telefone' ]; $chave = $_POST [ 'chave' ]; $queryInsert = $link->query("insert into tb_cadastro VALUES ('".$id."', '".$nome."','".$inst."','".$data."','".$telefone."','".$chave."')"); $affected_rows = mysqli_affected_rows($link); if($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>".'Cadastrado com Sucesso!'."<br>"; header("Location: ../cadastro.php"); endif; --------------- relatorio.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <form action="banco_de_dados/consulta_rel.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 3px"> <legend><img src="imagens/relatorio.png" alt="[imagem]" style="width:55px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Data --> <div class="input-field col s12"> <i class="material-icons prefix">event_available</i> <input type="date" name="datainicial" id="data" maxlength="10" required> <label for="data">Data Inicial</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">event_busy</i> <input type="date" name="datafinal" id="data" maxlength="10" required> <label for="data">Data Final</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="Gerar" class="btn blue"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; ----------------- arquivo_rel.php ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <fieldset class="formulario" style="padding: 5px"> <legend><img src="imagens/relatorio.png" alt="[imagem]" style="width:55px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <table class="highlight" > <thead> <tr> <th>Nome</th> <th>Instituição</th> <th>Data</th> </tr> </thead> </table> </fieldset> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; --------------- consulta_rel.php <?php session_start(); include_once 'conexao.php'; $datainicial = $_POST [ 'datainicial' ]; $datafinal = $_POST [ 'datafinal' ]; $sql= "select * from tb_cadastro where data between '$datainicial' and '$datainicial'"; $consulta_rel = mysqli_query($link, $sql); echo "sql"; if($consulta_rel) { ////// $_SESSION['msg'] = "<p class='center green-text'>".'Devolução efetuada com Sucesso!'."<br>"; header("Location: ../arquivo_rel.php"); exit(); } Alguma dica de como eu posso, mostrar os dados do cadastro, quando abro a pagina relatório e coloco as datas para consulta
    • By dlucas2002
      Bom dia, estou querendo calcular a distância entre dois pontos(ponto1 e ponto2) no google maps, alguém pode me ajudar?Já tenho os dois pontos representados por marcadores e a rota, só falta a distância entre eles.Conferi a bibliografia atual do google maps sobre Distance Matrix mas ela não tem nenhum código que funcionasse pra esse meu problema específico.
       
       
      <!DOCTYPE html> <html>   <head>     <style>        /* Set the size of the div element that contains the map */       #map {         height: 400px;  /* The height is 400 pixels */         width: 100%;  /* The width is the width of the web page */        }     </style>   </head>   <body>     <div id="map"></div>     <script>                  function initMap() {             var directionsService = new google.maps.DirectionsService();             var directionsRenderer = new google.maps.DirectionsRenderer();               var ponto1 = new google.maps.LatLng(-5.577833,-36.913061);;             var ponto2 = new google.maps.LatLng(-22.934894,-47.060696);                var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: ponto2});             directionsRenderer.setMap(map);                var marker = new google.maps.Marker({position: ponto1, map: map});             var marker1 = new google.maps.Marker({position: ponto2, map: map});               var request = {                 origin: ponto1,                 destination: ponto2,                 travelMode: 'DRIVING'             };             directionsService.route(request, function(result, status) {                 if (status == 'OK') {                 directionsRenderer.setDirections(result);                 }             });                     }                </script>            <script async defer     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9RfaC0_ixdYkUQokkZqO93mzvLBCrvr4&callback=initMap">     </script>   </body> </html>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.