jQuery form.find radio class In my application we have four inputs radio controls and on the load the value is checked to true. When the user select another radio and then save the form I want to get the new value. I am using the find class but then I need to use checked[0]. Is there a better way to do this?
JS
$(&quot;#form&quot;).submit(function (event) {
   event.preventDefault();
     console.log('free-text-form');
            var sortOrder = $(this).data('sortorder');
            console.log(sortOrder);
            var form = $(this);
            console.log('Processing Current Check');
            var checked = form.find(&quot;.radio-Class:checked&quot;);
            var currentChecked = checked[0];
            console.log(currentChecked);
            console.log(currentChecked.value);
            if (checkedRegRef.length == 1) {
                var NewId = currentChecked.value;
                 console.log(NewId);
            } 
});

Working Example
https://jsfiddle.net/tjmcdevitt/vh9n5srL/87/
With checked[0] you are getting a reference to the actual DOM element (instead of the jQuery object) but that is unnecessary in your case since jQuery provides a val() method, which returns the current value of the first element in the set of matched elements. So in your case, you could simply do: 

var checkedVal = form.find(".radio-Class:checked").val();


A better way to get the selected value as pointed out here by @Peter J is to use the input[name=radioName]:checked selector. Selecting through name attributes ensures that you select the desired radio group since these are meant to be unique. For better performance, you can pass in the form id as the second argument inside the selector method, which is used as a context here (this is same as if you would use $("#form").find("input[name=radioName]:checked")), here is the refactored code:



$("#form").submit(function(event) {
  var $formEl = $(this);
  var $labelEl = $formEl.find('#label1');
  var radioVal = $('input[name=RegimenReferences]:checked', $formEl).val();

  event.preventDefault();
  $labelEl.text(radioVal);
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#form {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form id="form" class="form-horizontal" data-sortorder="1"&gt;
  &lt;p&gt;Update Values&lt;/p&gt;
  &lt;label id="label1" type="text"&gt;1&lt;/label&gt;
  &lt;div&gt;
    &lt;label for="radio1"&gt;
      &lt;input type="radio" id="radio1" name="RegimenReferences" value="1" class="radio-Class" checked='true'&gt;
      (a) aaaaaa
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="radio2"&gt;
      &lt;input type="radio" id="radio2" name="RegimenReferences" value="2" class="radio-Class"&gt;
      (b) bbbbbb
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="radio3"&gt;
      &lt;input type="radio" id="radio3" name="RegimenReferences" value="3" class="radio-Class"&gt;
      (c) cccccc
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="radio4"&gt;
      &lt;input type="radio" id="radio4" name="RegimenReferences" value="4" class="radio-Class"&gt;
      (c) cccccc
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="text-center"&gt;
    &lt;button type="submit" class="btn btn-primary modal-submit-btn"&gt;Save&lt;/button&gt;
    &lt;button type="button" class="btn btn-default modal-close-btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;




Edit 1:
Since you already got the form selected you can pass that as the context therefore you don't need the form id.