JQuery | How to display variables when associated checkbox is checked

I'm creating a website that grabs weather information based on the location entered by the user. At the moment there are some features on the page with no functionality, it is still a work in progress. I apologies for the sloppy code.

I have 9 checkboxes at the top of my form that have the info that should be displayed and I'm not sure of the best method to edit the output accordingly.

$(document).ready(function() {
  var inputType = 1;

  $("#Radio1").click(function() {
    $("#lbl1").text("City Name:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';


    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2,}",
      "placeholder": "Regina"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 1;
  });

  $("#Radio2").click(function() {
    $("#lbl1").text("Postal Code:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[A-Z][0-9][A-Z]",
      "placeholder": "S4X"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 2;
  });

  $("#Radio3").click(function() {
    $("#lbl1").text("Latitude:");
    $("#lbl2").text("Longitude:");
    $("#Firstbox").removeAttr("pattern");
    $("#Secondbox").removeAttr("pattern");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "number",
      "min": "-90",
      "max": "90",
      "step": "any",
      "placeholder": "50.4"
    });

    $("#Secondbox").attr({
      "type": "number",
      "min": "-180",
      "max": "180",
      "step": "any",
      "placeholder": "-105.5"
    });

    inputType = 3;
  });

  $("#SearchButton").click(function() {
    if (checkValidity()) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var SearchResponse = this.responseText;

          var obj = JSON.parse(SearchResponse);
          var city_name = obj["name"];
          var country_name = obj["sys"]["country"];
          var longitude = obj["coord"]["lon"];
          var latitude = obj["coord"]["lat"];
          var weather_description = obj["weather"][0]["description"];
          var temp = obj["main"]["temp"] - 273.15;
          var pressure = obj["main"]["pressure"];
          var humidity = obj["main"]["humidity"];
          var wind_speed = obj["wind"]["speed"];
          var wind_direction = obj["wind"]["deg"];
          var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
          var sunset = new Date(obj["sys"]["sunset"] * 1000);

          var SearchResultsHTML = "City: " + city_name + "<br />" +
            "Country: " + country_name + "<br />" +
            "Longitude: " + longitude + "<br />" +
            "Latitude: " + latitude + "<br />" +
            "Weather: " + weather_description + "<br />" +
            "Temperature: " + temp + "<br />" +
            "Pressure: " + pressure + "<br />" +
            "Humidity: " + humidity + "<br />" +
            "Wind Speed: " + wind_speed + "<br />" +
            "Wind Direction: " + wind_direction + "<br />" +
            "Sunrise: " + sunrise.toLocaleTimeString() + "<br />" +
            "Sunset: " + sunset.toLocaleTimeString() + "<br />";

          $("#SearchResults").html(SearchResultsHTML);
        }
      }



      var Firstbox = $("#Firstbox").val();
      var Secondbox = $("#Secondbox").val();

      var apiKey = "52453f34dee0d65b1a41a02656142c6b";

      if (inputType == 1) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?q=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 2) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?zip=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 3) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?lat=" + Firstbox + "&lon=" + Secondbox +
          "&APPID=" + apiKey;
      }

      xhttp.open("GET", SearchString, true);
      xhttp.send();
    }
  });

  function displayError() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid) {
      if (inputType == 1 || inputType == 2) {
        alert("Country code must be 2 characters in length.");
      } else {
        alert("Longitude must be between -180 and 180");
      }
    } else {
      if (inputType == 1) {
        alert("City name must be longer than 1 character.");
      } else if (inputType == 2) {
        alert("Postal code must be 3 characters in length, following the format 'S4X'");
      } else {
        alert("Latitude must be between -90 and 90");
      }
    }
  }

  function checkValidity() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid && second.validity.valid) {
      return true;
    } else {
      displayError();
      return false;
    }
  }

  function checksSelected() {

  }
});

.validated:valid {
  background-color: #BDF0A8;
}

.validated:invalid {
  background-color: #FAC3C9;
}

.row {
  margin-bottom: 10px;
}

.ticksel {
  border: solid black 1px;
}

tr,
td {
  border: solid black 1px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">

<form id="searchForm" method="POST" action="URL">
  <div class="row col-md-12">
    <h2>OpenWeatherMap Weather Search</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h4>Search by:</h4>
      <input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
      <input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
      <input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
    </div>
    <div class="col-md-6">
      <h4>Show in search results:</h4>

      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value="yes"> Longitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Latitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Temperature</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Pressure</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Humidity</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Speed</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Direction</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunrise</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunset</div>
      </div>

    </div>
  </div>
  <div class="row col-md-12">
    <label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
    <label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
    <input id="SearchButton" type="button" value="Search" />
  </div>
</form>

<div class="row col-md-12">
  <h4>Current Weather</h4>
</div>
<div class="row col-md-12">
  <p id="SearchResults"></p>
</div>

<div class="row col-md-12">
  <table width="100%">
    <thead>
      <tr>
        <th>City</th>
        <th>Country</th>
        <th>Longitude</th>
        <th>Latitude</th>
        <th>Weather</th>
        <th>Temperature</th>
        <th>Pressure</th>
        <th>Humidity</th>
        <th>Wind Speed</th>
        <th>Wind Direction</th>
        <th>Sunrise</th>
        <th>Sunst</th>
        <th><a class="deleteAll" href="#">Clear Log</a></th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>