Dropdown with check radio, how to know which one is selected?

Asked

Viewed 39 times

0

I currently own a dropdown id drop and within it some checkbox radio. Currently I have the following code to know which checkbox is selected and its value. There is a more practical way to do this without doing if on each item to see if it is checked ?

$("#drop").change(function(){

    if($("#flexRadioDefault1").is(':checked')){

        alert("5 segundos");
        $("#refreshText").text("5 Segundos ");

    }
    
    if($("#flexRadioDefault2").is(':checked')){

        alert("10 segundos");
        $("#refreshText").text("10 Segundos ");

    }

    if($("#flexRadioDefault3").is(':checked')){

        alert("15 segundos");
        $("#refreshText").text("15 Segundos ");

    }

    if($("#flexRadioDefault4").is(':checked')){

        alert("30 segundos");
        $("#refreshText").text("30 Segundos ");

    }

    if($("#flexRadioDefault5").is(':checked')){

        alert("60 segundos");
        $("#refreshText").text("60 Segundos ");

    }
})

HTML:

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

<!-- Bootstrap --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
<!-- //Bootstrap --->
  
 
</head>
<body>

  <div class="container-fluid ">
    <p id="refreshText" class="float-left nav-link"> 5 segundos</p>
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="refresh-icon.png" class="mx-auto rounded-circle" height="25px" width="25px" alt="Atualizar dados ">
    </a>
    <div class="dropdown-menu  " id="drop" aria-labelledby="navbarDropdown">
      <center>
        <div class="form-check ">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" >
          <label class="form-check-label" for="flexRadioDefault1">
            05 Segundos 
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
          <label class="form-check-label" for="flexRadioDefault2">
            10 Segundos
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault3" checked>
          <label class="form-check-label" for="flexRadioDefault2">
            15 Segundos
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault4" checked>
          <label class="form-check-label" for="flexRadioDefault2">
            30 Segundos
          </label>
        </div>

        <div class="form-check">
          <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault5" checked>
          <label class="form-check-label" for="flexRadioDefault2">
            60 Segundos
          </label>

        </div>
      </center>
    </div>

        
 <!--  jquery base     -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <!--  //jquery base     -->
  
  
  
  
 <!--  bootstrap base     -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js" integrity="sha512-wV7Yj1alIZDqZFCUQJy85VN+qvEIly93fIQAN7iqDFCPEucLCeNFz4r35FCo9s6WrpdDQPi80xbljXB8Bjtvcg==" crossorigin="anonymous"></script>
 <!--  //bootstrap base     -->
  

</body>
</html>
javascript html jquery

  • you just need to know if the check in of the selected item is marked or every change needs to know all marked?

  • I am using Radio so only one will be selected , I need to know every change of my dropdown which of the radio check is marked.

  • in the case the selected radio may not be in the selected option.. That’s it?

  • can use a selector like this and take all inputs that are checked: $('input[type="checkbox"]:checked')

  • I don’t think I can make it clear what I need , follow https://jsfiddle.net/phnbL6m7/1/ with this very code, I need you to do just this but , reducing the amount of ifs you currently have

  • Always when posting a question on the site, enter all the code here and not only by links. Your code has several problems of Html. Because all checkboxes have the property checked if only one checkbox can be checked at a time, and the for of Labels always point to the same checkbox? That way if you check the last checkbox always the second will be marked and so on!

Show 1 more comment

1 answer

0

Well, you can use one function and create an object to have the values that will be passed to the function:

    function segundos(seg){
        alert(`${seg} Segundos`);
        $("#refreshText").text(`${seg} Segundos`);
    }
    const functions = {
        'flexRadioDefault1': 5,
        'flexRadioDefault2': 10,
        'flexRadioDefault3': 15,
        'flexRadioDefault4': 30,
        'flexRadioDefault5': 60
    }
    $("#drop").change(()=>{
        segundos(functions[$('input[type="checkbox"]:checked').id])
    })

Browser other questions tagged javascript html jquery

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