jQuery .css not changing element css

The selector .for not means to look for the tag <not> inside an element with class="for". To select an element with class="for not", you need to use .for.not.

The problem with the .css() code is that you put ; after px. px; is not a valid size unit. It's part of the syntax of a style attribute or the a stylesheet, but not part of the syntax of a specific CSS property.

You can also leave out the unit, as jQuery defaults to pixels. You could also just call the .height() function.

//Vote count variables
var ag = 2;
var nag = 0;

//Make only one checkbox tickable.
$('input[type="checkbox"]').on('change', function() {
  $('input[type="checkbox"]').not(this).prop('checked', false);
});

//Function to refresh the charts with new vote amounts.
function refreshChart() {
  $(".for").height(ag * 60);
  $(".for.not").height(nag * 60);
}

//Refresh the charts for user on submit click. 
$('#submit').click(function() {
  if ($('#c1').prop('checked') == true) {
    ag += 1;
  }
  if ($('#c2').prop('checked') == true) {
    nag += 1;
  }
  refreshChart();

});

.results {
  color: #111;
  display: show;
  align-items: center;
}

.for {
  display: block;
  margin: 0 auto;
  background-color: #27AE5F;
  width: 20px;
  height: 100px;
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: #fff;
}

.not {
  background-color: #c0392b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkcont">

  <div class="styleC">
    <input id="c1" type="checkbox">
    <label for="c1"> </label>
  </div>
  <p> I agree that the restrictions placed on imported cars should be removed or limited. </p> <br>
  <div class="styleC">
    <input id="c2" type="checkbox">
    <label for="c2"> </label>
  </div>
  <p> I believe the current restrictions and regulations should not be altered. </p>
</div>
</div>
<div class="results">
  <h2> The Current Standings of Opinions Submitted </h2>
  <div class="for">
    <p class="resultsNo yes"> 2 </p>
  </div>
  <div class="for not">
    <p class="resultsNo no"> 0 </p>
  </div>

</div>
<a id="submit"> Submit </a>
</div>
</div>

As Daniel said it should be .for.not and try it like this:

function refreshChart() {
  $(".for").css('height', ag * 60 + 'px');

  $(".for.not").css('height', nag * 60 + 'px');

}

try it here: https://jsfiddle.net/zqn1rdmt/

$(document).ready

First thing I did to fix this was I wrapped your code in a document.ready function so that we can make sure your code is run at the beginning.

Concatenation problems

I then fixed the way you were passing the pixel values to the .css() function.

/* You will want to wrap your code in document.ready so that your js runs when the page is done loading */
$(document).ready(function(){
//Vote count variables
var ag = 2;
var nag = 0; 

//Make only one checkbox tickable.
$('input[type="checkbox"]').on('change', function() {
    $('input[type="checkbox"]').not(this).prop('checked', false);
 });

 //Function to refresh the charts with new vote amounts.
function refreshChart(){
    /* Not sure if the way you were doing it previously was wrong (using an object), but
     * I know for a fact that the following method works (by using two parameters)
     * Your main issue was that you were using ag * 60 + 'px;'. The problem with that
     * is that javascript tries to add the result of ag * 60 and the string 'px'. This 
     * is not desired behaviour.
     */
    $(".for").css('height',[ag * 60,'px'].join(''));
    $(".for.not").css('height', [nag * 60,'px;'].join('')); //added .for.not change
}

//Refresh the charts for user on submit click. 
 $('#submit').click(function(){

    if ($('#c1').prop('checked') == true){
        ag += 1;
    }
    if ($('#c2').prop('checked') == true){
        nag += 1;
    }
    refreshChart();

 });
 });