Hello. I need to make a rating. And I have it as much as 3 sizes. Tell jquery easy to use so that you can do it like on the screen: enter image description here

3 answers 3

Not really a plugin, but I think it will be useful to know how it can be quite simple to implement yourself.

$(function() { var $formSubmit = $('.rating__submit'), $star = $('.stars__label'), $input = $star.find('input'), $result = $('.result span'); $star.click(function() { if ( !$(this).hasClass('checked') ) { $star.removeClass('checked'); $(this).addClass('checked'); } else { $(this).removeClass('checked'); $(this).find('input').prop('checked', false); } }); $formSubmit.click(function() { $input.each(function() { if( $(this).prop('checked') == true ) { $result.text($(this).val()); return false; } else { $result.text('NO'); } }); }); }); 
 .stars { display: flex; direction: rtl; justify-content: space-between; overflow: hidden; width: 95px; margin: 0 0 10px; } .stars__label { position: relative; width: 15px; height: 15px; filter: grayscale(1); transition: .15s; overflow: hidden; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTk5MjMxRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4MTk5MjMyRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qPqbrAAAAddJREFUeNpMUzsvBFEYPXNnH+xaxHqHSERWokDhkS00CiReP8APEJ0/oBE9nUQtatXqKERUGhItIiJRWNZjsTtznfnmM3Zmztz57v1e59w7jl0H0ERkiCr+L4f4wQziOOP3RzTvEt/A7WMGJpq04hyiKg4GFezS7hO7EgaJn14xeftqtROe2haTdO5HAsNMcy3rCeJdfXiZqEVfRzdKOy104piTaq6uWx3FxanhWVX+YWvLktpigXB5eyj9t+1zImh7lughriSZpYuHATRgHHWSMItXrPGrwLUuYW+RS5mfskO1p1jtiM5pUTxNNOqYUKE+iaBqoPmb8i5hxbD+KVvPsGYh4mw0MEiQVPuPcwyXtFsYd2BEOY+N+JgnVoWTp1tW1u3xlKuPLWKEdjHoKIaUipSUdvf4TjFoW6p8aWBZxj36bciu+GHSGIb4Ua9KG+GTj7bO1fFLuE9QFwiCYlmysBsaaGVPm3k/UeW4nC9gn1hkglZpv4Qx0rlQ7nw6as5akY4vDEwx0JEtPGGSQSY+puLdFHEJnQzWE+bYzZoD/45zZs5R+16m+BQdqipesGZ4zhuZJDqeD3wHuEMbnnEobFwGmpq/K/wD8uxqBzcYxT0t4leAAQA4Q5FZyHThVAAAAABJRU5ErkJggg=='); } .stars__label:hover, .stars__label:hover ~ .stars__label, .stars__label.checked, .stars__label.checked ~ .stars__label { filter: grayscale(0); } .stars__input { position: absolute; left: -5px; top: -5px; width: 30px; height: 30px; margin: 0; border-radius: 0; opacity: 0; } .result { margin-top: 10px; } / png; base64, iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw / eHBhY2tldCBiZWdpbj0i77u / IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 ++ IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTk5MjMxRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4MTk5MjMyRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIi8 + IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY + IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8 + qPqbrAAAAddJREFUeNpMUzsvBFEYPXNnH + xaxHqHSERWokDhkS00CiReP8APEJ0 / oBE9nUQtatXqKERUGhItIiJRWNZjsTtznfnmM3Zmztz57v1e59w7jl0H0ERkiCr + L4f4wQziOOP3RzTvEt / A7WMGJpq04hyiKg4GFezS7hO7EgaJn14xeftqtROe2haTdO5HAsNMcy3rCeJdfXiZqEVfRzdKOy104piTaq6uWx3FxanhWVX + YWvLktpigXB5eyj9t + 1zImh7lughriSZpYuHATRgHHWSMItXrPGrwLUuYW + RS5mfskO1p1jtiM5pUTxNNOqYUKE + iaBqoPmb8i5hxbD + KVvPsGYh4mw0MEiQVPuPcwyXtFsYd2BEOY + N + JgnVoWTp1tW1u3xlKuPLWKEdjHoKIaUipSUdvf4TjFoW6p8aWBZxj36bciu + .stars { display: flex; direction: rtl; justify-content: space-between; overflow: hidden; width: 95px; margin: 0 0 10px; } .stars__label { position: relative; width: 15px; height: 15px; filter: grayscale(1); transition: .15s; overflow: hidden; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTk5MjMxRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4MTk5MjMyRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qPqbrAAAAddJREFUeNpMUzsvBFEYPXNnH+xaxHqHSERWokDhkS00CiReP8APEJ0/oBE9nUQtatXqKERUGhItIiJRWNZjsTtznfnmM3Zmztz57v1e59w7jl0H0ERkiCr+L4f4wQziOOP3RzTvEt/A7WMGJpq04hyiKg4GFezS7hO7EgaJn14xeftqtROe2haTdO5HAsNMcy3rCeJdfXiZqEVfRzdKOy104piTaq6uWx3FxanhWVX+YWvLktpigXB5eyj9t+1zImh7lughriSZpYuHATRgHHWSMItXrPGrwLUuYW+RS5mfskO1p1jtiM5pUTxNNOqYUKE+iaBqoPmb8i5hxbD+KVvPsGYh4mw0MEiQVPuPcwyXtFsYd2BEOY+N+JgnVoWTp1tW1u3xlKuPLWKEdjHoKIaUipSUdvf4TjFoW6p8aWBZxj36bciu+GHSGIb4Ua9KG+GTj7bO1fFLuE9QFwiCYlmysBsaaGVPm3k/UeW4nC9gn1hkglZpv4Qx0rlQ7nw6as5akY4vDEwx0JEtPGGSQSY+puLdFHEJnQzWE+bYzZoD/45zZs5R+16m+BQdqipesGZ4zhuZJDqeD3wHuEMbnnEobFwGmpq/K/wD8uxqBzcYxT0t4leAAQA4Q5FZyHThVAAAAABJRU5ErkJggg=='); } .stars__label:hover, .stars__label:hover ~ .stars__label, .stars__label.checked, .stars__label.checked ~ .stars__label { filter: grayscale(0); } .stars__input { position: absolute; left: -5px; top: -5px; width: 30px; height: 30px; margin: 0; border-radius: 0; opacity: 0; } .result { margin-top: 10px; } 45zZs5R + 16m + BQdqipesGZ4zhuZJDqeD3wHuEMbnnEobFwGmpq / K / wD8uxqBzcYxT0t4leAAQA4Q5FZyHThVAAAAABJRU5ErkJggg == '); .stars { display: flex; direction: rtl; justify-content: space-between; overflow: hidden; width: 95px; margin: 0 0 10px; } .stars__label { position: relative; width: 15px; height: 15px; filter: grayscale(1); transition: .15s; overflow: hidden; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTk5MjMxRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4MTk5MjMyRUQxMjExRTY4MDFGRjVCQ0Q5Q0Y1M0FFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qPqbrAAAAddJREFUeNpMUzsvBFEYPXNnH+xaxHqHSERWokDhkS00CiReP8APEJ0/oBE9nUQtatXqKERUGhItIiJRWNZjsTtznfnmM3Zmztz57v1e59w7jl0H0ERkiCr+L4f4wQziOOP3RzTvEt/A7WMGJpq04hyiKg4GFezS7hO7EgaJn14xeftqtROe2haTdO5HAsNMcy3rCeJdfXiZqEVfRzdKOy104piTaq6uWx3FxanhWVX+YWvLktpigXB5eyj9t+1zImh7lughriSZpYuHATRgHHWSMItXrPGrwLUuYW+RS5mfskO1p1jtiM5pUTxNNOqYUKE+iaBqoPmb8i5hxbD+KVvPsGYh4mw0MEiQVPuPcwyXtFsYd2BEOY+N+JgnVoWTp1tW1u3xlKuPLWKEdjHoKIaUipSUdvf4TjFoW6p8aWBZxj36bciu+GHSGIb4Ua9KG+GTj7bO1fFLuE9QFwiCYlmysBsaaGVPm3k/UeW4nC9gn1hkglZpv4Qx0rlQ7nw6as5akY4vDEwx0JEtPGGSQSY+puLdFHEJnQzWE+bYzZoD/45zZs5R+16m+BQdqipesGZ4zhuZJDqeD3wHuEMbnnEobFwGmpq/K/wD8uxqBzcYxT0t4leAAQA4Q5FZyHThVAAAAABJRU5ErkJggg=='); } .stars__label:hover, .stars__label:hover ~ .stars__label, .stars__label.checked, .stars__label.checked ~ .stars__label { filter: grayscale(0); } .stars__input { position: absolute; left: -5px; top: -5px; width: 30px; height: 30px; margin: 0; border-radius: 0; opacity: 0; } .result { margin-top: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="rating"> <div class="stars"> <label class="stars__label"> <input type="radio" name="star" value="5" class="stars__input"> </label> <label class="stars__label"> <input type="radio" name="star" value="4" class="stars__input"> </label> <label class="stars__label"> <input type="radio" name="star" value="3" class="stars__input"> </label> <label class="stars__label"> <input type="radio" name="star" value="2" class="stars__input"> </label> <label class="stars__label"> <input type="radio" name="star" value="1" class="stars__input"> </label> </div> <button class="rating__submit">Submit</button> <div class="result"> Rating: <span></span> </div> </form>

  • Huge thanks. I will definitely save myself - Slivki show
 <input name="star2" type="radio" class="star"/> <input name="star2" type="radio" class="star"/> <input name="star2" type="radio" class="star" checked="checked"/> <input name="star2" type="radio" class="star"/> <input name="star2" type="radio" class="star"/>

Use jquery to add and remove styles. because in HTML you cannot change input [type = 'radio'] use an image.

  • one
    If this is the answer, then some kind of incomplete. There are no styles and little is clear how to write them. I would look at the code and decided that all the stars would be empty and only in the middle would be painted over. Lol, this is not at all what the topstarter requested: it should be painted from the first star to the selected star (three stars are painted over - three marks). And (sighing) you answer not the question that was asked: the plugin was asked, not the code. - AK ♦
  • @AK, WordPress Programmers Not Satisfied : DDD - VostokSisters
  • @VostokSisters specifically? I do not understand the comments. - AK ♦