I have problem with a code after migrating to jquery 3
NOT WORKING : Need update and need delete ui jquery I would like migrate to 3.6 but error :
add theme jQuery ui cdn url will resolve the issue as this jsFiddle
But if you want to get rid of the jQuery ui ,
You could create your own progress , some css and simple js ,as shown in the below Snippet :
$(document).ready(function() {
$("#progressbar").css("width",0);
$('[type*=radio]').click(function() {
var totalChecked = 0;
var totalRadioGroups = 0;
var previousName = '';
$.each($('[type*=radio]'), function(index, value) {
var radioName = $(this).attr('name');
var radioId = this.id;
if (previousName != radioName) {
totalRadioGroups ;
}
if ($('#' radioId).is(':checked')) {
totalChecked ;
}
previousName = radioName;
});
var percentage = (totalChecked / totalRadioGroups) * 100;
$('#progressbar').css('width', percentage "%");
$('#progressbar').html(percentage.toFixed(2) "%");
$('#percentage').html(percentage.toFixed(2) "%");
});
});
#progress-container {
width: 100%;
border: 1px solid #ddd;
height:25px;
border-radius:5px;
overflow:hidden;
}
#progressbar {
height: 25px;
background-color: #0412AD;
text-align: center;
line-height: 30px;
color: white;
width:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Question 1<br>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ11">Option 1<br>
</div>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ12">Option 2<br>
</div>
<div class="js-form-item">
<input type="radio" name="radioQone" id="radioQ13">Option 3<br>
</div>
<br>Question 2<br>
<div class="js-form-item79">
<input type="radio" name="radioQtwo" id="radioQ21">Option 1<br>
</div>
<div class="js-form-item78">
<input type="radio" name="radioQtwo" id="radioQ22">Option 2<br>
</div>
<div class="js-form-item34">
<input type="radio" name="radioQtwo" id="radioQ23">Option 3<br>
</div>
<br>Question 3<br>
<div class="js-form-item111">
<input type="radio" name="radioQthree" id="radioQ31">Option 1<br>
</div>
<div class="js-form-item11">
<input type="radio" name="radioQthree" id="radioQ32">Option 2<br>
</div>
<div class="js-form-item3">
<input type="radio" name="radioQthree" id="radioQ33">Option 3<br>
</div>
<br>Question 3<br>
<div class="js-form-item5">
<input type="radio" name="radioQFOUR" id="radioQ35">Option 1<br>
</div>
<div class="js-form-item-">
<input type="radio" name="radioQFOUR" id="radioQ36">Option 2<br>
</div>
<div class="js-form-itemè">
<input type="radio" name="radioQFOUR" id="radioQ37">Option 3<br>
</div>
<br>
<div id="progress-container">
<div id="progressbar">
</div>
</div>
<div id="percentage">
<p>fff</p>
</div>