我们如何使用jquery或javascript中的单选按钮的值显示/隐藏div标签？

Question

hi i am very new to jquery and i am working on show and hide div tags using values of radio buttons. here is my HTML.

 <div id="OwnVehicle" style="display:none"> <label> <input type="radio" name="vehicleList" id="two" onclick="fuelList()" value="1" />Two Wheeler </label> <label> <input type="radio" name="vehicleList" id="four" onclick="fuelList()" value="2" />Four Wheeler </label> </div> <div id="TwoWheeler" style="display:none"> <label> <input type="radio" name="TwoWheeler" value="6" />Electric </label> <label> <input type="radio" name="TwoWheeler" value="7" />Petrol </label> </div> <div id="FourWheeler" style="display:none"> <label> <input type="radio" name="FourWheeler" value="1" />Electric </label> <label> <input type="radio" name="FourWheeler" value="2" />Petrol </label> <label> <input type="radio" name="FourWheeler" value="3" />Diesel </label> <label> <input type="radio" name="FourWheeler" value="4" />CNG </label> <label> <input type="radio" name="FourWheeler" value="5" />LPG </label> </div> 

now i need help in writing a jquery code for showing the div tag with id = "two wheeler" when radio button value = 1 and div tag with id = "four wheeler" when radio button value = 2.

thnaks in advance.

sorry for anyone who couldnt understand my question.

Answer 1

Here is what you can do easily with JQuery

 $(document).ready(function(){ $("input[name='vehicleList']").click(function(){ var selectedValue = $(this).val(); if(selectedValue === "1"){ $('#TwoWheeler').show(); $('#FourWheeler').hide(); }else{ $('#TwoWheeler').hide(); $('#FourWheeler').show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="OwnVehicle"> <label> <input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler </label> <label> <input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler </label> </div> <div id="TwoWheeler" style="display:none"> <label> <input type="radio" name="TwoWheeler" value="6" />Electric </label> <label> <input type="radio" name="TwoWheeler" value="7" />Petrol </label> </div> <div id="FourWheeler" style="display:none"> <label> <input type="radio" name="FourWheeler" value="1" />Electric </label> <label> <input type="radio" name="FourWheeler" value="2" />Petrol </label> <label> <input type="radio" name="FourWheeler" value="3" />Diesel </label> <label> <input type="radio" name="FourWheeler" value="4" />CNG </label> <label> <input type="radio" name="FourWheeler" value="5" />LPG </label> </div> 

Answer 2

My first suggestion is to change your onclick="" to onchange="".

<input type="radio" name="vehicleList" id="four" onchange="fuelList(this)" value="2"  class="radioButtons" />Four Wheeler

<script>
 function fuelList(element)
{
   var id = element.value;
   if( id == 1)
     {
      $(".wheels")hide(); //hides all the elements with class = wheels
      $("#twoWheelers")show(); //shows the div with id = twoWheelers
     }
    else if( id == 2 )
     {
      $(".wheels")hide(); //hides all the elements with class = wheels
      $("#fourWheelers")show(); //shows the div with id = fourWheelers
      }
}
</script>

and put a class to the div of your "twoWheeler" and "fourWheeler"
I just make it "wheels"

 <div id="twoWheelers" class="wheels">
 ...
 </div>

 <div id="fourWheelers" class="wheels">
 ...
 </div>

Answer 3

Yiu can try this working code:

 function fuelList(_this){ var value=$(_this).attr("value"); $("#TwoWheeler").hide(); $("#FourWheeler").hide(); if(value=="1"){ $("#TwoWheeler").show(); } else if(value=="2"){ $("#FourWheeler").show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="OwnVehicle"> <label> <input type="radio" name="vehicleList" id="two" onclick="fuelList(this)" value="1" />Two Wheeler </label> <label> <input type="radio" name="vehicleList" id="four" onclick="fuelList(this)" value="2" />Four Wheeler </label> </div> <div id="TwoWheeler" style="display:none"> <label> <input type="radio" name="TwoWheeler" value="6" />Electric </label> <label> <input type="radio" name="TwoWheeler" value="7" />Petrol </label> </div> <div id="FourWheeler" style="display:none"> <label> <input type="radio" name="FourWheeler" value="1" />Electric </label> <label> <input type="radio" name="FourWheeler" value="2" />Petrol </label> <label> <input type="radio" name="FourWheeler" value="3" />Diesel </label> <label> <input type="radio" name="FourWheeler" value="4" />CNG </label> <label> <input type="radio" name="FourWheeler" value="5" />LPG </label> </div> 

Answer 4

try this one

 function fuelList(val) { var val = parseInt(val); if (val == 1) { $('#FourWheeler').hide(); $('#TwoWheeler').show(); } else { $('#TwoWheeler').hide(); $('#FourWheeler').show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="OwnVehicle"> <label> <input type="radio" name="vehicleList" id="two" onclick="fuelList(this.value)" value="1" />Two Wheeler </label> <label> <input type="radio" name="vehicleList" id="four" onclick="fuelList(this.value)" value="2" />Four Wheeler </label> </div> <div id="TwoWheeler" style="display:none"> <label> <input type="radio" name="TwoWheeler" value="6" />Electric </label> <label> <input type="radio" name="TwoWheeler" value="7" />Petrol </label> </div> <div id="FourWheeler" style="display:none"> <label> <input type="radio" name="FourWheeler" value="1" />Electric </label> <label> <input type="radio" name="FourWheeler" value="2" />Petrol </label> <label> <input type="radio" name="FourWheeler" value="3" />Diesel </label> <label> <input type="radio" name="FourWheeler" value="4" />CNG </label> <label> <input type="radio" name="FourWheeler" value="5" />LPG </label> </div> 

Answer 5

Assuming I understood the question correctly, and you want to hide a div when you check a radio button?

Here is an example of how that can be achieved:

HTML:

<input type="radio" name="euResident" id="euResidentYes" value="Yes" checked />
<label for="euResidentYes" class="radio">yes</label>
<input type="radio" name="euResident" id="euResidentNo" value="No" />
<label for="euResidentNo" class="radio">no</label>

<div id='div'>Hello World</div>

Javascript:

function switchVar() {
    if($("#euResidentNo").prop("checked"))
        $("#div").show();
     else
        $("#div").hide();
}

$(document).ready(function() {
    switchVar();
    $("input[name=euResident]").change(switchVar);
});

It is an example using Javascript as this is perfect to use for this. Demo: http://jsfiddle.net/2Uj9F/169/

Answer 6

Here you go with jsfiddle https://jsfiddle.net/ym10add9/

$("input[type='radio']").change(function() {
    $('div').hide();
    $( '#' + $(this).attr('value')).show();
});

Answer 7

I wrote code as per you describe in your post. May be useful to solve your problem.

 $(document).ready(function() { $('input[type=radio][name=vehicleList]').change(function() { if (this.value == '1') { $("#FourWheeler").hide(); $("#TwoWheeler").show(); } else if (this.value == '2') { $("#FourWheeler").show(); $("#TwoWheeler").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="vehicleList"> <label> <input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler </label> <label> <input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler </label> </div> <h5>Output : </h5> <div id="TwoWheeler" style="display:none"> <label> <input type="radio" name="TwoWheeler" value="6" />Electric </label> <label> <input type="radio" name="TwoWheeler" value="7" />Petrol </label> </div> <div id="FourWheeler" style="display:none"> <label> <input type="radio" name="FourWheeler" value="1" />Electric </label> <label> <input type="radio" name="FourWheeler" value="2" />Petrol </label> <label> <input type="radio" name="FourWheeler" value="3" />Diesel </label> <label> <input type="radio" name="FourWheeler" value="4" />CNG </label> <label> <input type="radio" name="FourWheeler" value="5" />LPG </label> </div> 

Answer 8

Below is simple JQuery code that will help you to achieve your requirement:

 $("input[name='vehicleList']").on('click', function() { if ($(this).val() == 1) { $('#TwoWheeler').show(); $('#FourWheeler').hide(); } else { $('#TwoWheeler').hide(); $('#FourWheeler').show(); } }); 

 #TwoWheeler, #FourWheeler { display: none; } #OwnVehicle label, #TwoWheeler label, #FourWheeler label { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="OwnVehicle"> <label> <input type="radio" name="vehicleList" id="two" value="1" />Two Wheeler </label> <label> <input type="radio" name="vehicleList" id="four" value="2" />Four Wheeler </label> </div> <div id="TwoWheeler"> <label> <input type="radio" name="TwoWheeler" value="6" />Electric </label> <label> <input type="radio" name="TwoWheeler" value="7" />Petrol </label> </div> <div id="FourWheeler"> <label> <input type="radio" name="FourWheeler" value="1" />Electric </label> <label> <input type="radio" name="FourWheeler" value="2" />Petrol </label> <label> <input type="radio" name="FourWheeler" value="3" />Diesel </label> <label> <input type="radio" name="FourWheeler" value="4" />CNG </label> <label> <input type="radio" name="FourWheeler" value="5" />LPG </label> </div> 

Answer 9

This is one way to do it:

$( "#r0" ).bind( "click", function() {
  $("#OwnVehicle").show();
  $("#TwoWheeler").hide();
});

$( "#r1" ).bind( "click", function() {
  $("#OwnVehicle").hide();
  $("#TwoWheeler").show();
});

Here a working fiddle https://jsfiddle.net/0aa8w2sj/

It can be improved