How to take values only of checkboxes that are checked and those that were not checked do not return anything?

Question

HTML code

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="card card-success card-outline">
        <div class="card-header">
          <h5 class="titleFormInd">Indicar Imóvel</h5>
          <p class="card-header__subTitle">Preencha a indicação!</p>
        </div>
        <!-- Início das configurações Formulário de Proprietáro -->
        <div class="card-body">
          <fieldset class="fieldSetCliente">
            <legend class="tipoFormCLiente">Tipo de Cliente</legend>
            <div class="col-md-6 formClienteCompra">
              <div class="form-group">
                <div class="icheck-success">
                  <input type="checkbox" id="tipoClienteCompra" name="tipoClienteCompra" value="Comprar">
                  <label for="tipoClienteCompra" class="tipoClienteCompra">Comprar Imóvel</label>
                </div>
              </div>
            </div>
            <div class="col-md-6 formClienteLocacao">
              <div class="form-group">
                <div class="icheck-success">
                  <input type="checkbox" id="tipoClienteLocacao" name="tipoClienteLocacao" value="Locação">
                  <label for="tipoClienteLocacao" class="tipoClienteLocacao">Alugar Imóvel</label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <legend class="dadosFormCliente">Dados do Cliente</legend>
              <div class="floating-label">
                <div class="input-wrapper">
                  <label>Nome do Cliente*</label>
                  <input type="text" name="nomeCliente" id="nomeCliente" value="" class="form-control" placeholder="Digite o nome do cliente...">
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="inputer floating-label">
                <div class="input-wrapper">
                  <label>Informações adicionais (opcional)</label>
                  <input type="text" name="infoAdicionalCliente" id="infoAdicionalCliente" value="" class="form-control" placeholder="Digite algumas Informações adicionais se necessário...">
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <p>Foi realizado alguma parceria de indicação com algum de nossos capitadores?</p>
                <div class="icheck-success">
                  <input type="checkbox" id="parCapitadorSim" name="parCapitadorSim" value="y">
                  <label for="parCapitadorSim" class="parCapitadorSim">Sim</label>
                </div>
                <div class="icheck-success">
                  <input type="checkbox" id="parCapitadorNao" name="parCapitadorNao" value="n">
                  <label for="parCapitadorNao" class="parCapitadorNao">Não</label>
                </div>
                <div class="inpNomeCapitador">
                  <label for="txtNameParCapitador">Nome Capitador:</label>
                  <input type="text" id="txtNameParCapitador" name="txtNameParCapitador" disabled="true" />
                </div>
              </div>
            </div>
          </fieldset>
          <button class="btnIndicaCliente" id="btnIndicaCliente" href="#" onclick="cadIndCliente('IndicaCliente');">CADASTRAR CLIENTE</button>
        </div>
      </div>
    </div>
    <!-- /.col-md-6 -->
  </div>
  <!-- /.row -->
</div><!-- /.container-fluid -->

Javascript code

// Função formulário de cadastro de indicação de Cliente  
function cadIndCliente(btnPropToggler) {
  // Variáveis criadas para receber as informações dos inputs do formulário de cadastro do Cliente
  var tipoClienteCompra = document.getElementById("tipoClienteCompra");
  var tipoClienteLocacao = document.getElementById("tipoClienteLocacao");
  var parCapitadorSim = document.getElementById("parCapitadorSim");
  var parCapitadorNao = document.getElementById("parCapitadorNao");

  // Armazena todas as variáveis em uma única variável
  var dados = {

    'tipoClienteCompra': tipoClienteCompra.value,
    'tipoClienteLocacao': tipoClienteLocacao.value,
    'parCapitadorSim': parCapitadorSim.value,
    'parCapitadorSim': parCapitadorSim

  }

  // Converte valores em javascript para uma String JSON
  var dadosFormCliente = JSON.stringify(dados);
  console.log(dadosFormCliente);

//...

In case the console.log(dadosFormCliente); is returning the value of fields that are also not marked and I need it to bring only the information of the checkbox that is marked in the form.

Answer 1

you must make some changes to your codes

1. Replace chackbox with radiobutton, since only one field should be marked;
2. use the same name for equivalent inputs tipoCliente and parCapitador
3. replace the getElementById for querySelector, where you can filter through name and checked

follows modified snippets:

<input type="radio" id="tipoClienteCompra" name="tipoCliente" value="Comprar">
<input type="radio" id="tipoClienteLocacao" name="tipoCliente" checked value="Locação">
<input type="radio" id="parCapitadorSim" name="parCapitador" value="y">
<input type="radio" id="parCapitadorNao" name="parCapitador" checked value="n">

var tipoCliente = document.querySelector('input[name="tipoCliente"]:checked');
var parCapitador = document.querySelector('input[name="parCapitador"]:checked');
// Armazena todas as variáveis em uma única variável
var dados = {
  'tipoCliente': tipoCliente.value,
  'parCapitador': parCapitador.value
}
// Converte valores em javascript para uma String JSON
var dadosFormCliente = JSON.stringify(dados);
console.log(dadosFormCliente);

// {"tipoCliente":"Locação","parCapitador":"n"}