How to switch between multiple map legends

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<div id='map'></div>

CSS

body {
    margin: 0;
    padding: 0;
  }

  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }

  .legend {
    line-height: 18px;
    color: #050;
  }

  .legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
  }

JavaScript

var map = L.map('map').setView([48.2, 26.2], 9);
var region2010 = {
  "type": "FeatureCollection",

  "features": [{
      "type": "Feature",
      "id": 0,
      "properties": {
        "Id": 0,
        "atr_1": 1,
        "atr_2": 70,
        "atr_3": 1000,
        "atr_4": 15
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [25.50783275614242, 48.468499363367471],
            [25.732772219116896, 48.515856232138447],
            [25.812169990281404, 48.064417395040607],
            [25.509097442809662, 48.065970041257344],
            [25.50783275614242, 48.468499363367471]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "id": 1,
      "properties": {
        "Id": 0,
        "atr_1": 2,
        "atr_2": 80,
        "atr_3": 2000,
        "atr_4": 30
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [25.812169990281461, 48.064417395040664],
            [25.73277221911701, 48.515856232138503],
            [26.038928452643859, 48.565581372405347],
            [26.111739959422209, 48.147272127580266],
            [25.812169990281461, 48.064417395040664]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "id": 2,
      "properties": {
        "Id": 0,
        "atr_1": 3,
        "atr_2": 90,
        "atr_3": 3000,
        "atr_4": 1000
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [25.812169990281461, 48.064417395040664],
            [26.111739959422209, 48.147272127580266],
            [26.127444402060632, 48.000221437419953],
            [26.006091890763287, 47.921699224227552],
            [25.812169990281461, 48.064417395040664]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "id": 3,
      "properties": {
        "Id": 0,
        "atr_1": 4,
        "atr_2": 100,
        "atr_3": 4000,
        "atr_4": 1500
      },
  ...