I have the following code:
<form>
<input type="radio" id="div1" name="consulta[]" value="1">Opção 1
<input type="radio" id="div2" name="consulta[]" value="2">Opção 2
<input type="submit" value="Registrar">
</form>
<div id="m1" style="display:none">
DIV 1
</div>
<div id="m2" style="display:none">
DIV 2
</div>I need DIV 1 only to appear (changing its display in the css) when the radius div1 is clicked, and the same for DIV 2.
What is the simplest way to do this?
$('input:radio[name="consulta"]').change(function() {
if ($(this).val() == 1) {
$("#m1").attr("hidden", false);
$(this).attr("checked", true);
$("#m2").attr("hidden", true);
$(this).attr("checked", true);
} else if ($(this).val() == 2) {
$("#m2").attr("hidden", false);
$(this).attr("checked", true);
$("#m1").attr("hidden", true);
$(this).attr("checked", true);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><inputtype="radio" id="div1" name="consulta" checked value="1">Opção 1
<input type="radio" id="div2" name="consulta" value="2">Opção 2
<input type="submit" value="Registrar">
</form>
<div id="m1">
DIV 1
</div>
<div id="m2" hidden>
DIV 2
</div> A simple solution is to use the change() method of jQuery , every time there is an event in an input radio , the change () .
If you change the HTML structure and put the <div> within the form, after the inputs, you can do this toggle effect with CSS only. In this question an explanation of the + selector.
form div {
display: none;
color: red
}
input[type='radio']:checked + div {
display: inline-block
}<form>
<label for='div1'>Opção 1</label>
<input type='radio' id='div1' name='consulta[]' value='1'>
<div id='m1'>
DIV 1
</div>
<label for='div2'>Opção 2</label>
<input type='radio' id='div2' name='consulta[]' value='2'>
<div id='m2'>
DIV 2
</div>
</form>Using jQuery, there are a number of ways to solve your problem, here I'll write one:
var viewDivs = {
init: function(){
var that = this;
//Elements
that.inputs = $('input:radio');
that.divs = $('.div-radiobox');
//Events
that.inputs.change(function(){
that.render();
});
},
render: function(){
//input selecionado
var idDiv = this.inputs.filter(':checked').attr('data-div');
this.divs.each(function(){
var $this = $(this);
if($this.attr('id') == idDiv){
$this.show();
}else{
$this.hide();
}
})
}
}
viewDivs.init();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><inputtype="radio" data-div="div1" name="consulta[]" value="1">Opção 1
<input type="radio" data-div="div2" name="consulta[]" value="2">Opção 2
<input type="submit" value="Registrar">
</form>
<div id="div1" class="div-radiobox" style="display:none">
DIV 1
</div>
<div id="div2" class="div-radiobox" style="display:none">
DIV 2
</div>To the letter I believe that this is from here ...
let radio = document.querySelectorAll(".rd");
for(let i = 0; i < radio.length; i++) {
radio[i].onclick = function(){
let div = document.querySelectorAll('.onOff');
for(let i = 0; i < div.length; i++) div[i].style.display = 'none';
document.getElementById('e' + radio[i].id).style.display = "block";
}
}<form>
<input type="radio" id="div1" class="rd" name="consulta[]" value="1">Opção 1
<input type="radio" id="div2" class="rd" name="consulta[]" value="2">Opção 2
<input type="submit" value="Registrar">
</form>
<div id="ediv1" class="onOff" style="display:none">
DIV 1
</div>
<div id="ediv2" class="onOff" style="display:none">
DIV 2
</div> So you can add more inputs and reference them with a div , just add the 'e' and the corresponding number example ...
<input type="radio" id="div7" name="consulta" value="7">Opção 7
...
<div id="ediv7" class="onOff" style="display:none">
DIV 7
</div>
Why do not you use the hidden attribute?
And you can test here
<form onchange="myFunction();">
<label for='div1'>Opção 1</label>
<input type='radio' id='div1' name='consulta[]' value='1' >
<div id='m1' hidden>
DIV 1
</div>
<label for='div2'>Opção 2</label>
<input type='radio' id='div2' name='consulta[]' value='2'>
<div id='m2' hidden>
DIV 2
</div>
</form>
<script>
function myFunction() {
var $radio1 = document.getElementById("div1");
var $div1 = document.getElementById("m1");
var $radio2 = document.getElementById("div2");
var $div2 = document.getElementById("m2");
if($radio1.checked){
$div1.removeAttribute("hidden");
}else{
$div1.setAttribute("hidden", "hidden");
}
if($radio2.checked){
$div2.removeAttribute("hidden");
}else{
$div2.setAttribute("hidden", "hidden");
}
}
</script>