Show or hide items depending on two radio buttons

Question

Show or hide items depending on two radio buttons

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have managed to show a div according to the response of a radio button , but how can I do to show the same div but with the combination of two radio button ?

I share my code:

function mostrar(dato) {
  if (dato == "1") {
    document.getElementById("nombre").style.display = "block";
    document.getElementById("apellidos").style.display = "none";
    document.getElementById("edad").style.display = "none";
  }
  if (dato == "2") {
    document.getElementById("nombre").style.display = "none";
    document.getElementById("apellidos").style.display = "block";
    document.getElementById("edad").style.display = "none";
  }
  if (dato == "3") {
    document.getElementById("nombre").style.display = "none";
    document.getElementById("apellidos").style.display = "none";
    document.getElementById("edad").style.display = "block";
  }
}

<div class="row">
  <div class="col-md-5">
    <form action="" method="POST" enctype="multipart/form-data">
      <div class="form-group" id="opciones">
        <label for="">Opciones:</label>
        <input type="radio" name="opc" value="1" onchange="mostrar(this.value);">Solo nombre
        <input type="radio" name="opc" value="2" onchange="mostrar(this.value);">Solo apellidos
        <input type="radio" name="opc" value="3" onchange="mostrar(this.value);">Solo edad
      </div>
      <div class="form-group" id="nombre" style="display:none;">
        <label for="">Nombre:</label>
        <input type="text" class="form-control" name="nombre">
      </div>
      <div class="form-group" id="apellidos" style="display:none;">
        <label for="">Apellidos:</label>
        <input type="text" class="form-control" name="apellidos">
      </div>
      <div class="form-group" id="edad" style="display:none;">
        <label for="">Edad:</label>
        <input type="text" class="form-control" name="edad">
      </div>
    </form>
  </div>
</div>

<!--Este seria el otro div con el qué me gustaría hacer la combinación-->
<div class="form-group" id="masOpciones">
  <label for="">Opciones2:</label>
  <input type="radio" name="opc" value="">Municipio
  <input type="radio" name="opc" value="">Ciudad
</div>

javascript html5 html

asked by Brian Velez 03.07.2018 в 14:43

source

3 answers

1

The first thing you have to do is change the name attribute of your second set of radios. Followed by that you have to verify if both have an answer, if both answers have value, then you can show what you need.

With pure JS:

var set1 = document.getElementsByName("opc");
var set2 = document.getElementsByName("opc2");

var val1=null;
var val2=null;

function mostrar(){
	for (var i = 0;  i < set1.length; i++)
  {
   if (set1[i].checked)
   {
    val1=set1[i].value;
   }
	}
  for (var i = 0;  i < set2.length; i++)
  {
   if (set2[i].checked)
   {
    val2=set2[i].value;
   }
	}
  
  if(val1!=null && val2!=null){
  //Muestra aqui lo que necesites mostar
  	 document.getElementById("nombre").style.display = "none";
    document.getElementById("apellidos").style.display = "none";
    document.getElementById("edad").style.display = "block";
  }
}

<div class="row">
            <div class="col-md-5">
                <form action="" method="POST"  enctype="multipart/form-data" >
                <div class="form-group" id="opciones" >
                    <label for="">Opciones:</label>
                    <input type="radio" name="opc" value="1" onchange="mostrar();">Solo nombre
                    <input type="radio" name="opc" value="2"  onchange="mostrar();">Solo apellidos 
                    <input type="radio" name="opc" value="3"  onchange="mostrar()">Solo edad
                </div>
                <div class="form-group" id="nombre" style="display:none;">
                    <label for="">Nombre:</label>
                    <input type="text" class="form-control" name="nombre"  >
                </div>
                <div class="form-group" id="apellidos" style="display:none;">
                    <label for="">Apellidos:</label>
                    <input type="text" class="form-control" name="apellidos"  >
                </div>
                <div class="form-group" id="edad" style="display:none;">
                    <label for="">Edad:</label>
                    <input type="text" class="form-control" name="edad"  >
                </div>
            </div>
        </form>
    </div>
</div>
<!--Este seria el otro div con el qué me gustaría hacer la combinación-->
<div class="form-group" id="masOpciones">
    <label for="">Opciones2:</label>
    <input type="radio" name="opc2" value="M" onchange="mostrar()">Municipio
    <input type="radio" name="opc2" value="C" onchange="mostrar()">Ciudad
</div>

answered by 03.07.2018 в 15:31

0

I think this can help you for what you are trying to do: (Using Jquery)

$( document ).ready(function() {

  //Capturas el cambio de algun input radio
  $("input[type='radio']").change(function(){
  
    //Ocultas todo 
    $("#nombre").hide();
    $("#apellido").hide();
    $("#edad").hide();
  
    //obtenes el valor de los dos sets de Radios
    var opc = $("input[name='opc']:checked").val();
    var opc2 = $("input[name='opc2']:checked").val();
    
    //tomas la decisión que queres en base a los dos valores
    //en este caso si selecciona "nombre" y "ciudad" mostras el input text para el Nombre
    if(opc == 1 && opc2 == 2)
      $("#nombre").show()
      
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="opciones" >
    <label for="">Opciones:</label>
    <input type="radio" name="opc" value="1">nombre
    <input type="radio" name="opc" value="2">apellidos 
    <input type="radio" name="opc" value="3">edad
</div>
<div class="form-group" id="masOpciones">
    <label for="">Opciones2:</label>
    <input type="radio" name="opc2" value="1">Municipio
    <input type="radio" name="opc2" value="2">Ciudad
</div>

<div class="form-group" id="nombre" style="display:none;">
    <label for="">Nombre:</label>
    <input type="text" class="form-control" name="nombre"  >
</div>

Greetings!

answered by 03.07.2018 в 15:56

There is a cron in laravel Listview with an icon and text

score 2 · Accepted Answer

2

I think you have to change the "=" to ":". Example:

document.getElementById("nombre").style.display: none;

I did it like this:

var y = document.getElementById("codigo");
y.style=  "display:none";

answered by 03.07.2018 / 15:17

source