jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
<div class="contenu">

<div class="pays">
    <label class="taille-label">Pays : </label>
      <div class="choix-pays">    
        <label for="radio-1">France</label>
        <input type="radio" name="pays" id="radio-1">
        <label for="radio-2">Espagne</label>
        <input type="radio" name="pays" id="radio-2">
        <label for="radio-3">Italie</label>
        <input type="radio" name="pays" id="radio-3">
      </div>
</div>

<div class="region">
    <label class="taille-label">Région : </label>
      <div class="choix-region">    
        <label for="radio-4">Aquitaine</label>
        <input type="radio" name="region" id="radio-4">
        <label for="radio-5">Grand-Est</label>
        <input type="radio" name="region" id="radio-5">
        <label for="radio-6">Bretagne</label>
        <input type="radio" name="region" id="radio-6">
        <label for="radio-7">Normandie</label>
        <input type="radio" name="region" id="radio-7">
        <label for="radio-8">Occitanie</label>
        <input type="radio" name="region" id="radio-8">
      </div>
</div>

<div class="departement">
    <label class="taille-label">Département : </label>
      <div class="choix-departement">    
        <label for="radio-9">01</label>
        <input type="radio" name="departement" id="radio-9">
        <label for="radio-10">02</label>
        <input type="radio" name="departement" id="radio-10">
        <label for="radio-11">03</label>
        <input type="radio" name="departement" id="radio-11">
        <label for="radio-12">04</label>
        <input type="radio" name="departement" id="radio-12">
        <label for="radio-13">05</label>
        <input type="radio" name="departement" id="radio-13">
        <label...

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.contenu{float:left;width:100%;margin:0;padding:0;}

.pays{float:left;width:100%;margin:0;margin-bottom:10px;padding:0;}
.choix-pays{display:inline-block;}
.choix-pays input[type="radio"]{width:100%;}

.region{float:left;width:100%;margin:0;margin-bottom:10px;padding:0;}
.choix-region{display:inline-block;}
.choix-region input[type="radio"]{width:100%;}

.departement{float:left;width:100%;margin:0;margin-bottom:10px;padding:0;}
.choix-departement{display:inline-block;}
.choix-departement input[type="radio"]{width:100%;}

 .taille-label{display:inline-block;width:100px;margin:0;margin-right:10px;padding:0;white-space:nowrap;}

JavaScript

$( function() {
    $( "input" ).checkboxradio({
      icon: false
    });
  } );