양식 제출을 기반으로 jQuery로 CSS 스타일을 변경하는 방법은 무엇입니까?

jQuery 및 일반 JS를 사용하여 양식 입력을 기반으로 웹 페이지의 CSS를 변경하려고합니다. 나는 이것으로 매우 어려움을 겪고 있으며 올바른 해결책을 찾을 수 없습니다. 빨간 라디오 버튼으로 JavaScript와 jQuery를 시험해 보았지만 좋은 측정을 위해 모든 HTML을 포함했습니다. 코드를 다시 작성하는 데 몇 시간을 보냈고 멈췄습니다. 도와주세요.

HTML

    <!--Form that  user fills out to change css styling of the page-->
    <form id="cssStyling">

    
      <label for="fontChange">Choose a font:</label>
      
      <select id="fontChange" name="fontChange">
      
        <option value="Times">Times</option>
        
        <option value="Georgia">Georgia</option>
        
        <option value="Helvetica">Helvetica</option>
        
        <option value="Verdana">Verdana</option>
        
      </select>
      
      <br><br>
      
      
      <p>What color should the paragraph font be?</p>
      
        <!--red radio button-->
      
        <input type="radio" id="red" name="colorP" value='red' required>
                        
        <label for="red" > Red</label>
                        
                        
        <!--blue radio button-->
                        
        <input type="radio" id="blue" name="colorP" value="blue">
                        
        <label for="blue" > Blue</label>
                        
                        
        <!--green radio button-->
                        
        <input type="radio" id="green" name="colorP" value="green">
                        
        <label for="green"> Green</label>
      
      
        <br><br>
        
        <p>Which page elements should have borders?</p>
                            
        <!--Checkbox and label for h1-->
                    
        <input type="checkbox" id="heading1" name="elements">
                    
        <label for="heading1">h1 element</label>
                    
                    
        <!--Checkbox and label for h2-->
                    
        <input type="checkbox" id="heading2" name="elements" value="heading2">
                    
        <label for="heading2">h2 element</label>
                    
                    
        <!--Checkbox and label for p-->
                    
        <input type="checkbox" id="paragraphs" name="elements">
                    
        <label for="paragraphs">p element</label>
        
        <br><br>
                    



        <input type="submit" value="Click to submit styling changes" />
        
    </form>
    
    <!--End form-->

<h1>I am h1</h1>

<p>I am p</p>

<h2>I am h2</h2>

자바 스크립트

$(function() {
 $('#cssStyling').on('submit', function(evnt) {
  evnt.preventDefault();

    var n = $("select").val();
    // If the value is less than 7, add a red border
    if (n == "red") {
        $("p").css("color", "red");
    }
   });
 });