Switch Case with Java Script and Checkbox

Asked

Viewed 243 times

0

Hello!

I want to make an app on want to make a function in which the user choose the type of Uber that he will catch, marking a CheckBox with the Uber type (Uber X, Select and Black). For that I want to use one Switch Case instead of IFs. I made a code where my idea was to make an array and the position of the array be the choice of the case. But when printing on the console, the variable tipoEscolhido is given as undefined.

. How can I get only the value of the array that is checked?

Thank you.

Follow the codes: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Uber</title>

    <link rel="stylesheet" href="../08-uberMod/estilo.css">
    <script src="../08-uberMod/executar.js"></script>


</head>

<body>

    
    <h1>Uber</h1>

    <p>Tipo de Uber</p>


<section class="alinhaBox">
        <input  class="uber" type="checkbox" name="uber" id="uberX"> Uber X </input>
        <input  class="uber" type="checkbox" name="uber" id="uberSelect"> Uber Select </input>
        <input  class="uber" type="checkbox" name="uber" id="uberBlack"> Uber Black </input>
 </section>

        <br>

        <p>Local de Saída:</p>
            <input type="text" name="localSaida" id="localSaida">
        <p>Local de Destino:</p>
            <input type="text" name="localDestino" id="localDestino">

        <br>

        <p>Forma de Pagamento:</p>
                <input type="checkbox" name="cartao" id="cartao">Cartão de Crédito</input>
                <input type="checkbox" name="dinheiro" id="dinheiro">Dinheiro</input>

        <br>

        <br>

        <button onclick="executar()">Pedir Uber</button>
</body>
</html>

function executar(){

    let uberX = document.getElementById("uberX").value;
    let uberSelect = document.getElementById("uberSelect").value;
    let uberBlack = document.getElementById("uberBlack").value;

    let tipoUber  = [uberX, uberSelect, uberBlack]

    let tipoEscolhido 

    switch (tipoUber.checked){

        case 0:
           tipoEscolhido = "Uber X"
            break;
        case 1: 
            tipoEscolhido = "Uber Select"
            break;
        case 2: 
            tipoEscolhido = "Uber Black"
            break;

    }

    console.log(tipoEscolhido)

}

javascript html html5
  • 2

    If the user can only choose one type of option, he should use radiobutton and not checkbox.

2 answers

0


Follows the resolution of your problem.

replaces the document.getElementById().value for document.getElementById("uberX").checked this way if the Checkbox is marked the return will be true if not the return will be false, then added the function indexOf(), passing by true as parameter, so the function will return me the position that the value true was found in the matrix, if it does not find the value true , the return will be -1.

    function executar() {

        let uberX = document.getElementById("uberX").checked;
        let uberSelect = document.getElementById("uberSelect").checked;
        let uberBlack = document.getElementById("uberBlack").checked;
        let tipoUber = [uberX,uberSelect,uberBlack].indexOf(true)
        let tipoEscolhido
        switch (tipoUber) {
            case -1:
                tipoEscolhido = "Tipo de uber não informado"
                break;
            case 0:
                tipoEscolhido = "Uber X"
                break;
            case 1:
                tipoEscolhido = "Uber Select"
                break;
            case 2:
                tipoEscolhido = "Uber Black"
                break;
        }

        alert(tipoEscolhido)

    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Uber</title>



</head>

<body>


    <h1>Uber</h1>

    <p>Tipo de Uber</p>


    <section class="alinhaBox">
        <input class="uber" type="checkbox" name="uber" id="uberX"> Uber X </input>
        <input class="uber" type="checkbox" name="uber" id="uberSelect"> Uber Select </input>
        <input class="uber" type="checkbox" name="uber" id="uberBlack"> Uber Black </input>
    </section>

    <br>

    <p>Local de Saída:</p>
    <input type="text" name="localSaida" id="localSaida">
    <p>Local de Destino:</p>
    <input type="text" name="localDestino" id="localDestino">

    <br>

    <p>Forma de Pagamento:</p>
    <input type="checkbox" name="cartao" id="cartao">Cartão de Crédito</input>
    <input type="checkbox" name="dinheiro" id="dinheiro">Dinheiro</input>

    <br>

    <br>

    <button onclick="executar()">Pedir Uber</button>
</body>

</html>

  • 1

    Thank you! It worked perfectly!

-2

Another option would be to search for example the class uber return the selected.

Consider using a radio instead of a checkbox.

function executar() {

    const nodelist = document.querySelectorAll('.uber');

    const checked = Array.from(nodelist).find(el => el.checked);

    if (checked) console.log(checked.value);
    else console.log('nada selecionado');
}
    <section class="alinhaBox">
        <input class="uber" type="checkbox" name="uber" value="Uber X" id="uberX"> Uber X
        <input class="uber" type="checkbox" name="uber" value="Uber Select" id="uberSelect"> Uber Select
        <input class="uber" type="checkbox" name="uber" value="Uber Black" id="uberBlack"> Uber Black
    </section>


    <button onclick="executar()">Pedir Uber</button>

Browser other questions tagged javascript html html5

You are not signed in. Login or sign up in order to post.