Cześć Jestem bardzo nowy w jQuery i pracuję na pokazie i ukrywam tagi DIV za pomocą wartości przycisków radiowych. Oto mój 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>

Teraz potrzebuję pomocy w pisaniu kodu jQuery do pokazania znacznika DIV z ID = "Dwa Wheeler", gdy wartość przycisku radiowa = 1 i DIV Tag z ID = "Cztery Wheeler", gdy wartość przycisku radiowa = 2.

Z góry dziękuję.

Przepraszam za każdy, kto nie mógł zrozumieć moje pytanie.

0
hemanth mangalampalli 4 lipiec 2017, 10:55

9 odpowiedzi

Najlepsza odpowiedź

Spróbuj tego

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>
0
Bhargav Chudasama 4 lipiec 2017, 08:06

To jeden sposób, aby to zrobić:

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

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

Tutaj robocza skrzypce https://jsfiddle.net/0AAA8W2SJ/

Można się poprawić

-2
TeKilla 4 lipiec 2017, 08:02

Poniżej znajduje się prosty kod jQuery, który pomoże Ci osiągnąć wymaganie:

$("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>
0
Milan Chheda 4 lipiec 2017, 10:56

Napisałem kod zgodnie z opisem w swoim poście. Może być przydatny do rozwiązania problemu.

$(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>
0
Nilesh Khisadiya 4 lipiec 2017, 10:23

Moją pierwszą sugestią jest zmiana OnClick = "" na 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>

I umieść klasę do div swojego "twinheeler" i "czterodwiątka"
Po prostu robię to "koła"

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

 <div id="fourWheelers" class="wheels">
 ...
 </div>
0
Rence 4 lipiec 2017, 08:17

Tutaj idziesz z JSFiddle https://jsfiddle.net/ym10Add9/

$("input[type='radio']").change(function() {
    $('div').hide();
    $( '#' + $(this).attr('value')).show();
});
0
Shiladitya 4 lipiec 2017, 08:07

Zakładając, że poprawnie zrozumiałem pytanie, a chcesz ukryć div, gdy sprawdzasz przycisk radiowy?

Oto przykład tego, jak można osiągnąć:

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

Jest to przykład przy użyciu JavaScript, ponieważ jest to idealne rozwiązanie do tego. DEMO: http://jsfiddle.net/2UJ9F/169/

0
unknowncoder 4 lipiec 2017, 08:07

Możesz wypróbować ten kod pracy:

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>
0
Bharatsing Parmar 4 lipiec 2017, 08:05

Oto, co możesz łatwo zrobić z 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>
0
Ankit Agarwal 4 lipiec 2017, 08:02