我們如何使用jquery或javascript中的單選按鈕的值顯示/隱藏div標簽？

Question

嗨，我是jquery的新手，我正在使用單選按鈕的值來顯示和隱藏div標簽。 這是我的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> 

現在，我需要幫助編寫一個jquery代碼，以在單選按鈕值= 1時顯示id =“ two wheeler”的div標簽，在單選按鈕值= 2時顯示id =“ four wheeler”的div標簽。

提前打招呼。

對不起任何無法理解我的問題的人。

Answer 1

這是您可以輕松使用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

我的第一個建議是將您的onclick =“”更改為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>

並在“ twoWheeler”和“ fourWheeler”的div上添加一個類
我只是把它做成“輪子”

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

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

Answer 3

Yiu可以嘗試以下工作代碼：

 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

試試這個

 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

假設我正確理解了這個問題，並且您想在選中單選按鈕時隱藏div？

這是一個如何實現的示例：

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);
});

這是一個使用Javascript的示例，因為它非常適合用於此目的。 演示： http : //jsfiddle.net/2Uj9F/169/

Answer 6

在這里您使用jsfiddle https://jsfiddle.net/ym10add9/

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

Answer 7

我按照您在帖子中的描述編寫了代碼。 可能對解決您的問題很有用。

 $(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

以下是簡單的JQuery代碼，可幫助您實現要求：

 $("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

這是一種方法：

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

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

這是一個工作的小提琴https://jsfiddle.net/0aa8w2sj/

可以改善