problem with radio input

Question

problem with radio input

Navigation

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

4

good morning.

The detail is that I have two inputs radius, which when clicking one of them I want to show me a div that is hidden when opening the page, and tried several methods and none works, I want this do in javascript , I've tried with:

$("input[type=radio]").on("change",function()

$('input:radio[name=bedStatus]:checked').change(function () {})

and still can not find a solution, I want to access the event change of the radius

javascript radiobutton

asked by Irais_Rivero 26.10.2017 в 17:45

source

3 answers

Script launched from rule udev stays zombie when launching a new process Create a new loop array for JS

score 6 · Answer 1

Basically, to know if a radio is checked or you should not do the following:

$("input[name=bedStatus]").click(function() {  
    if($(this).is(':checked')) {  
       $("#contenido").fadeIn();
    } 
 });

#contenido{
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="bedStatus" id="bedStatus">
<label for="bedStatus">Mostrar contenido</label>

<div id="contenido">Soy el contenido</div>

score 3 · Answer 2

You should use the click event:

$(function(){
  $('#ocultar').click(function(){
    $('#ocultar-mostrar').addClass('oculto');
  });
  $('#mostrar').click(function(){
    $('#ocultar-mostrar').removeClass('oculto');
  });

});

div{
  padding: 10px;
  font-size: 24px;
  border: solid 1px black;
}

.oculto{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="bedStatus" id="mostrar" value="mostrar">
<label for="mostrar">Mostrar</label>
<input type="radio" name="bedStatus" id="ocultar" value="ocultar" checked>
<label for="ocultar">Ocultar</label>


<div id="ocultar-mostrar" class="oculto">
  Div oculto
</div>

score 3 · Answer 3

Try assigning the same name to the radio so that there is always only one selected. Then you click on the radio samples the div or hide them using addClass() and removeClass() :

$("#ocultar2").change(function(){
  $("#div1").addClass('oculto');
});

$("#ocultar1").change(function(){
  $("#div1").removeClass('oculto');
});

.oculto{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="nombreInput" id="ocultar1" /> Mostrar  
  
  <input type="radio"  name="nombreInput" id="ocultar2" /> Ocultar 
</div>

<div class="oculto" id="div1">
Div 1
</div>