Hinzufügen und Entfernen von Klasse beim Umschalten durch Radiobutton

Question

Ich versuche, eine Klasse basierend auf einem Radio-Button-Verhalten hinzuzufügen und zu entfernen. Die Idee ist, wenn der ausgewählte Optionsfeldwert Paypal ist, dann werden alle Eingabefelder der Klasse = "Erforderlich" entfernt, und wenn auf die Kreditkarte umgeschaltet wird, werden alle Felder, die die erforderliche Klasse entfernt haben, die erforderliche Klasse zurückbekommen. Hier ist, wie ich es tue

$('input[name*="payment"]').on('change', function() { 
    var type = this.value; 
    switch (type) { 
    case 'paypal': 
     $('#payment input').each(function() { 
     if ($(this).hasClass('required')) { 
      $(this).removeClass('required'); 
      $(this).addClass('requiredFalse'); 
     } 
     }); 
    case 'creditcard': 
     $('#payment input').each(function() { 
     if ($(this).hasClass('requiredFalse')) { 
      $(this).addClass('required'); 
      $(this).removeClass('requiredFalse'); 
     } 
     }); 
    } 
}); 

hier die Geige ist. Kann nicht herausfinden, was ich falsch mache.

https://jsfiddle.net/sghoush1/d225cdrp/1/

Answer 1

Sie switch-case fehlt die Pausen. Also, wenn Typ "Paypal" war, wurden beide Fälle ausgeführt, so funktioniert Switch. Also versuchen Sie dies:

$('input[name*="payment"]').on('change', function() { 
    var type = this.value; 
    switch (type) { 
    case 'paypal': 
     $('#payment input').each(function() { 
     if ($(this).hasClass('required')) { 
      $(this).removeClass('required'); 
      $(this).addClass('requiredFalse'); 
     } 
     }); 
     break; 
    case 'creditcard': 
     $('#payment input').each(function() { 
     if ($(this).hasClass('requiredFalse')) { 
      $(this).addClass('required'); 
      $(this).removeClass('requiredFalse'); 
     } 
     }); 
     break; 
    } 
}); 

Answer 2

$(document).ready(function(){ 
$('input[name*="payment"]').on('change', function() { 
    var type = this.value; 
    switch (type) { 
    case 'paypal': 
     $('#payment input').each(function() { 
     if ($(this).hasClass('required')) { 
      $(this).removeClass('required'); 
      $(this).addClass('requiredFalse'); 
     } 
     }); 
     break; 
    case 'creditcard': 
     $('#payment input').each(function() { 
     if ($(this).hasClass('requiredFalse')) { 
      $(this).addClass('required'); 
      $(this).removeClass('requiredFalse'); 
     } 
     }); 
     break; 
    } 
    //console.log(type); 
}); 
}); 

Answer 3

toggleClass Versuchen Sie Ihren Code kürzer zu machen.

//To remove require and add requiredFalse 
$(this).toggleClass("required requiredFalse"); 

//To add requireFalse and remove require 
$(this).toggleClass("requiredFalse required"); 

Mehr Informationen zu toggleClass sind hier zu finden. toggleClass

Snippet das Arbeitsbeispiel

$('input[name*="payment"]').on('change', function() { 
 
    var type = this.value; 
 
    switch (type) { 
 
    case 'paypal': 
 
      $('#payment input').each(function() { 
 
      if ($(this).hasClass('required')) { 
 
       $(this).toggleClass("required requiredFalse"); 
 
      } 
 
      }); 
 
      break; 
 
    case 'creditcard': 
 
      $('#payment input').each(function() { 
 
      if ($(this).hasClass('requiredFalse')) { 
 
       $(this).toggleClass("requiredFalse required"); 
 
      } 
 
      }); 
 
      break; 
 
    } 
 
})

.requiredFalse { 
 
    border: 1px solid black; 
 
} 
 

 
.required { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>creditcard</div> 
 
<input type="radio" name="payment" value="creditcard"> 
 
<div>paypal</div> 
 
<input type="radio" name="payment" value="paypal"> 
 
<form id="payment"> 
 
    <input class="required" type="text" id="address1"> 
 
    <input type="text" id="address2"> 
 
    <input class="required" type="text" id="zipcode"> 
 
</form>