添加课程的问题(Issue adding a class)

我正在尝试在检查输入时添加一个类。 但是，我的尝试不起作用。 该课程没有添加。 我尝试了addClass和toggleClass 。

有谁看到我做错了什么？

 $('.social-input').on('change', function () {
		var social1 = $('#social1');
		var social2 = $('#social2');
		if (social1.is(':checked')) {
			$(this).addClass('active');
		}
		else if (social2.is(':checked')) {
			$(this).toggleClass('active');
			
		}
	}); 
  
.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label> 
  
 
I am attempting to add a class when an input is checked. However, my attempt is not working. The class does not add. I tried addClass and toggleClass. 
 
Does anyone see what I am doing wrong?
 
 
 
  
  
 $('.social-input').on('change', function () {
		var social1 = $('#social1');
		var social2 = $('#social2');
		if (social1.is(':checked')) {
			$(this).addClass('active');
		}
		else if (social2.is(':checked')) {
			$(this).toggleClass('active');
			
		}
	}); 
  
.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label> 
  
 

                
最满意答案
                
                    
                        
 除了其他正确的答案，您可以通过执行以下JS来简化这一点。 
 
 
 
  
  
 $('.social-input').on('change', function () {
       var box = $('.social-option-box');
       var checkedBox = box.has('.social-input:checked');
       box.not(checkedBox).removeClass('active');
       checkedBox.addClass('active');
 }); 
  
.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label> 
  
 
Along with the other correct answers, you may be able to simplify this a little by doing the following JS.
 
 
 
  
  
 $('.social-input').on('change', function () {
       var box = $('.social-option-box');
       var checkedBox = box.has('.social-input:checked');
       box.not(checkedBox).removeClass('active');
       checkedBox.addClass('active');
 }); 
  
.social-option-box {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0;
	margin: 20px 5%;
	width: 35%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
	transition: ease-in-out .5s;
}
.social-option-box.active {
	transition: ease-in-out .5s;
	background: #45ba95;
	color: #FFF;
}
.social-option-box:hover {
	background-color: #45ba95;
	color: #FFF;
	transition: ease-in-out .5s;
}
.social-input {
	display: none;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="social-option-box" for="social1">Yes, following
	<input type="radio" name="social" id="social1" class="social-input" value="Yes, following">
</label>
<label class="social-option-box" for="social2">No, I'm not
	<input type="radio" name="social" id="social2" class="social-input" value="Not following">
</label>