Entfernen div beim Ändern der Optionsfeld

Question

Es gibt zwei Radiobuttons. (Javascript) Nach Auswahl der ersten Option muss die div-Klasse entfernt werden, die sich auf einer anderen Seite befindet, und bei Auswahl der zweiten Option muss das div angezeigt werden und diese Ausführung sollte nur nach dem Klicken auf "Senden" erfolgen. Jede Hilfe sehr geschätzt.

<input type="radio" name="radio" id="radio1">Regular Shipping 
 
<input type="radio" name="radio" id="radio2">COD Shopping 
 

 
<input type="submit" class="btn" value="SUBMIT"> 
 

 
<!----------The following div is in another page------> 
 

 
<div class="test">Lorem Ipusm</div>

Answer 1

Sie können mit folgenden Lösung versuchen:

document.getElementById('submit').addEventListener('click', change_value); 
 
function change_value(){ 
 
    var radioOptions = document.getElementsByName('radio'); 
 
    var selected = ''; 
 
    for (var i = 0; i < radioOptions.length; i++) {  
 
     if (radioOptions[i].checked) { 
 
      selected = radioOptions[i].id 
 
      break; 
 
     } 
 
    } 
 
    if(selected == 'radio1'){ 
 
    document.getElementsByClassName('test')[0].style.display = 'none'; 
 
    } else if (selected == 'radio2'){ 
 
    document.getElementsByClassName('test')[0].style.display = 'block'; 
 
    } else { 
 
    alert('select option first!'); 
 
    } 
 
}

<input type="radio" name="radio" id="radio1">Regular Shipping 
 
<input type="radio" name="radio" id="radio2">COD Shopping 
 

 
<input type="submit" id='submit' class="btn" value="SUBMIT"> 
 

 
<!----------The following div is in another page------> 
 

 
<div class="test">Lorem Ipusm</div>

In obigem Code I/nur versteckt mit classname das erste Element anzuzeigen ist 'test' Wenn du dich für alle bewerben willst, brauchst du eine Schleife, um das zu tun.