Select only ONE checkbox with vanilla javascript and bootstrap 4

Question

Select only ONE checkbox with vanilla javascript and bootstrap 4

Navigation

#1 by (1 votes)

1

I have the following code that generates the form printed on the image ...

<div class="form-check form-group" id="areaTermosCondicoes">
     <input type="checkbox" id="accept-term" class="form-check-input">
     <label for="accept-term" class="form-check-label">Li e concordo com os <a href="#">Termos de uso</a></label>
     <div class="invalid-feedback">
          <span class="alert-message"></span>
     </div>
     <div class="valid-feedback">
          <span class="alert-message"></span>
     </div>
     <button type="button" class="btn btn-secundary ml-2" id="cadastrar" onclick="cadastrar()" type="submit">Cadastrar-se como <span></span></button>
</div>

I needed to get the data marking the terms and conditions of this form so I can validate too ... I am not able to ...

The code I'm using in Js is:

let termosCondicoes = document.querySelector('form#formCadastro #accept-term')

javascript html html5 twitter-bootstrap front-end

asked by anonymous 17.05.2018 / 17:48

1 answer

How to display DropDown just by sliding the mouse over the content? Syntax error Adjacent JSX React

score 1 · Accepted Answer

Access the .checked property:

function checar(){
  let termosCondicoes = document.getElementById('accept-term');
  if(termosCondicoes.checked)
    alert('Li e concordo com os Termos de uso está marcado');
   else
   alert(' Li e concordo com os Termos de uso não está marcado');
}

<div class="form-check form-group" id="areaTermosCondicoes">
     <input type="checkbox" id="accept-term" class="form-check-input">
     <label for="accept-term" class="form-check-label">Li e concordo com os <a href="#">Termos de uso</a></label>
     <div class="invalid-feedback">
          <span class="alert-message"></span>
     </div>
     <div class="valid-feedback">
          <span class="alert-message"></span>
     </div>
     <button type="button" class="btn btn-secundary ml-2" id="cadastrar" onclick="checar()" type="submit">Checar <span></span></button>
</div>