Radio Button inside a form-group

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="form">
  <hr>


  <div class="form-group">
    <input id="AccountId" name="AccountId" type="hidden" value="JKB703042481VN00">
    <input type="hidden" id="tempStore">
    <input id="SendSMS" name="SendSMS" type="hidden" value="No">
    <input id="RequiresApproval" name="RequiresApproval" type="hidden" value="No">
  </div>

  <div class="form-group">
    <label>Pick a Settlement Mode</label>
    <div class="form-control">
      <div class="container">
        <div class="form-check form-check-inline">
          <input checked="checked" class="form-check-input" id="rbIsSettlementOnHold_No" name="IsSettlementOnHold" type="radio" value="No"><span>*</span>
          <label for="rbIsSettlementOnHold_No" class="form-check-label"> Standard</label>

        </div>
      </div>

      <div class="container">
        <div class="form-check form-check-inline">
          <input class="form-check-input" id="rbIsSettlementOnHold_Yes" name="IsSettlementOnHold" type="radio" value="Yes"><span></span>
          <label for="rbIsSettlementOnHold_Yes" class="form-check-label"> On Request </label>

        </div>
      </div>


    </div>
  </div>

  <div class="form-group">
    <textarea class="form-control" cols="50" id="AdditionalNote" name="AdditionalNote" placeholder="Any Aditional Note" rows="3" spellcheck="false"></textarea>

  </div>

  <div class="form-group">

    <button type="submit" class="btn btn-dark" id="btnSelfServiceRequestSubmit">
      Submit
    </button>
    <button type="reset" class="btn btn-warning">
      Reset
    </button>
  </div>



</div>

<form>
  <div class="form-row" id="divCodePrompt">
    <div class="col-sm-9">
      <div class="form-group">
       ...

CSS

.form-control {
        height: auto;
    }
		
input[type=radio]:checked::before {
  color: blue;
  font-style: italic;

} 
input[type=radio]:checked::after ~.span {
	content: "Checked"
}

JavaScript

$(document).ready(function(){
	$('input:radio').change(function(){
  	if (this.checked)
    {
    	alert("You selected: " + $(this).val());
			
    }
  });
  
  $('button').click(function(){
  	var choice = $('input:radio[name="settlement"]:checked').val();
    alert(choice);
  });

});