This does not seem to be working when switching the values on load.
Also initially managed to get this working for 1 switch but have multiple on the page now so the toggle moves them all, how would i adjust so its done for each one?
$('.switch .inactive').hide();
var switchStatus = $('.switch').next('input').val();
// 1 = disable
// 0 = enabled
if (switchStatus == '1') {
$('.switch .active').hide();
} else {
$('.switch .active').show();
}
$('.switch').click(function() {
$('.inactive, .active').toggle();
var featureStatus = $(this).find('#ProductFeatures_TP_Status').val();
//console.log(featureStatus);
if (featureStatus == "1") {
$(this).find('#ProductFeatures_TP_Status').val('0');
} else {
$(this).find('#ProductFeatures_TP_Status').val('1');
}
});
.panel-heading {
cursor: pointer;
margin: 0;
}
.panel-heading .status {
float: right;
}
.panel-collapse {
display: none;
}
.panel-collapse.open {
display: block;
}
.panel-body .col-md-6.left {
padding-left: 0;
}
.panel-body .col-md-6.right {
padding-right: 0;
}
.panel-body .redactor-editor {
min-height: 100px !important;
}
.switch {
float: left;
font-size: 1.5em;
margin: -4px 10px 0 -5px;
}
.switch .active {
color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="switch ProductFeatures_TP_Status">
<i class="fa fa-toggle-on active"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
<input type="hidden" id="ProductFeatures_TP_Status" name="ProductFeatures_TP_Status" value="0">
</div>
<div class="switch ProductFeatures_TP_Status">
<i class="fa fa-toggle-on active"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
<input type="hidden" id="ProductFeatures_TP_Status1" name="ProductFeatures_TP_Status1" value="1">
</div>
<div class="switch ProductFeatures_TP_Status">
<i class="fa fa-toggle-on active"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
<input type="hidden" id="ProductFeatures_TP_Status2" name="ProductFeatures_TP_Status2" value="1">
</div>
Like this? http://jsfiddle.net/gb13r1b3/
All i did was find '.inactive, .active' relative to the clicked .switch
$('.switch').click(function() {
$(this).find('.inactive, .active').toggle();
var featureStatus = $(this).find('[id^=ProductFeatures_TP_Status]').val();
console.log(featureStatus);
//console.log(featureStatus);
if (featureStatus == "1") {
$(this).find('[id^=ProductFeatures_TP_Status]').val('0');
} else {
$(this).find('[id^=ProductFeatures_TP_Status]').val('1');
}
EDIT: the syntax [id^=ProductFeatures_TP_Status] finds any id that starts with ProductFeatures_TP_Status. Once you have the clicked .switch, there is only one id that starts with ProductFeatures...
EDIT-2: http://jsfiddle.net/gb13r1b3/1/
EDIT-3: http://jsfiddle.net/gb13r1b3/5/
Given the opening sentence of your question, I assume you're open to alternative solutions so here's a pure CSS onefor you but it requires some changes to your HTML, if that's acceptable.
You'll need to change all your inputs to be checkboxes and then place labels immediately after them in your HTML, containing your FontAwesome icons.
Then, using CSS, you position the checkboxes off-screen and adjust the styling of the icons in the adjacent labels based on the checked status of each input.
*{box-sizing:border-box;color:#000;font-family:arial;margin:0;padding:0;}
input{
left:-9999px;
position:absolute;
}
label{
height:24px;
display:inline-block;
margin:5px;
overflow:hidden;
width:27px;
white-space:nowrap;
}
label>i::before{
display:inline-block;
font-size:24px;
transform:rotate(180deg);
}
input:checked+label>i::before{
color:#090;
transform:rotate(0deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<input id="ProductFeatures_TP_Status" type="checkbox" value="1">
<label for="ProductFeatures_TP_Status"><i class="fa fa-toggle-on"></i>Label 1</label>
<input checked id="ProductFeatures_TP_Status1" type="checkbox" value="1">
<label for="ProductFeatures_TP_Status1"><i class="fa fa-toggle-on"></i>Label 2</label>
<input checked id="ProductFeatures_TP_Status2" type="checkbox" value="1">
<label for="ProductFeatures_TP_Status2"><i class="fa fa-toggle-on"></i>Label 3</label>
Related
Problem
Once the input is entered in the input field, and the check button is clicked, the input element gets converted into a span element and the check icon gets converted into an edit icon.
I want that when someone clicks on the edit icon, the span element gets converted into the input element again.
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped");
let texts = document.querySelectorAll(".text");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let span = document.createElement("span");
let val = document.createTextNode(text.value ? text.value : "");
span.appendChild(val);
span.classList.add("text2");
items[i].appendChild(span);
if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
if (tgt.classList.contains("check-icon")) {
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
});
}
});
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
Js Fiddle
In your js file.
Modify the check-icon help block a bit, add the following code in the loop of btns.
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
Adding this additional if block will help.
if (tgt.classList.contains("edit-icon")) {
let texts = document.querySelectorAll(".text2");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let input = document.createElement("input");
input.value = text.textContent;
input.classList.add("text");
items[i].appendChild(input);
text.parentNode.replaceChild(input, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
});
});
}
jsFiddel link
Created a span element next to inputs, hidden by default.
Created 2 different click events for edit and check buttons.
On click one element type is made hidden and the other looses its hidden class.
Did not work on styling so you may want to do that yourself.
Also it's better to change .span class to something appropriate.
Khalil's suggestion about making inputs disabled sound good, too.
const container = document.querySelector(".container");
const editIcon = document.querySelector(".edit-icon");
const checkIcon = document.querySelector(".check-icon");
const inputs = [...container.querySelectorAll('.text')]
const spans = [...container.querySelectorAll('.span')]
editIcon.addEventListener('click', () => {
spans.forEach((el, i) => {
el.classList.add('hidden');
inputs[i].classList.remove('hidden');
})
editIcon.classList.add('hidden');
checkIcon.classList.remove('hidden');
})
checkIcon.addEventListener('click', () => {
inputs.forEach((el, i) => {
spans[i].textContent = el.value;
el.classList.add('hidden');
spans[i].classList.remove('hidden');
})
checkIcon.classList.add('hidden');
editIcon.classList.remove('hidden');
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: "Roboto", sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
.hidden {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
I need a five-star rating system for a PHP page I'm working on. I initially tried MooTools, but the page uses jQuery and they clash, so I am trying to get a jQuery rating system to work, but the icons do not appear.
I followed the instructions on the website. The website did say that I could use my own icons instead of font awesome icons, but I'm not sure how to do that.
Here is the JS file:
(function($) {
$.fn.stars = function(options) {
var settings = $.extend({
stars: 5,
emptyIcon: '☆',
filledIcon: '★',
color: '#E4AD22',
starClass: '',
value: 0,
text: null,
click: function() {}
}, options);
.
.
}
Here's the page where the stars should appear:
echo '<div id="stars" class="click-callback" style="height:34px;width:300px;border:1px solid red;margin: 5px auto;"></div>';
$('#stars').stars({
click: function(i) {
alert(i);
}
});
I tried replacing (as you can see in the code) the font awesome icon with Unicode characters, but that doesn't work either. I am new at jQuery, so any help would be much appreciated.
I expect to see five-star outlines that fill in as the user mouses over them. Once the user clicks on a star, all the stars up to that point should be filled and the rating submitted.
Right now nothing appears where the stars are supposed to be.
This is how I do it, using css pseudo elements.
In the mouseover function, we add the class .star-over to that element's icon and all .prevAll() sibling's icons. Then in the mouseleave function we remove those classes.
On click, if the element does not have the .rate-active class, we will add .rate-active to it and add .far (solid star) to this element and previous element's icons. We also remove .rate-active from any previous siblings.
Here is a link to my codepen: https://codepen.io/Souleste/pen/QXmgrV
$(document).on({
mouseover: function(event) {
var star = $(this).find('.star');
$(this).find('.far').addClass('star-over');
$(this).prevAll().find('.far').addClass('star-over');
},
mouseleave: function(event) {
var star = $(this).find('.star');
$(this).find('.far').removeClass('star-over');
$(this).prevAll().find('.far').removeClass('star-over');
}
}, '.rate');
$(document).on('click', '.rate', function() {
var star = $(this).find('.star');
if (!$(this).hasClass('rate-active')) {
$(this).siblings().find('.star').addClass('far').removeClass('fas rate-active').css('color', '#91a6ff');
star.addClass('rate-active fas').removeClass('far star-over');
$(this).prevAll().find('.star').addClass('fas').removeClass('far star-over').css('color', '#91a6ff');
}
});
.stars {
width: fit-content;
margin: 0 auto;
cursor: pointer;
display: flex;
}
.star {
color: #91a6ff !important;
}
.rate {
height: 50px;
margin-left: -5px;
padding: 5px;
font-size: 25px;
position: relative;
cursor: pointer;
}
.rate input[type="radio"] {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
pointer-events: none;
}
.star-over::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 16px;
content: "\f005";
display: inline-block;
color: #d3dcff;
z-index: 1;
position: absolute;
top: 10px;
left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<div class="stars">
<label class="rate">
<input type="radio" name="radio1" id="star1" value="star1">
<div class="face"></div>
<i class="far fa-star star one-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star2" value="star2">
<div class="face"></div>
<i class="far fa-star star two-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star3" value="star3">
<div class="face"></div>
<i class="far fa-star star three-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star4" value="star4">
<div class="face"></div>
<i class="far fa-star star four-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star5" value="star5">
<div class="face"></div>
<i class="far fa-star star five-star"></i>
</label>
</div>
I want to change the i prefix from far to fas when the radio is checked.
This code works if the inputs are checkboxes, but will not work when they are radio's. The checked state always stays after first click.
How do I get this function to run for radio's like it does for checkboxes?
$(document).ready(function() {
$('input[name="sort"]').change(function() {
if (
$(this)
.closest('[class*="list-"]')
.is(".list-alt")
) {
if ($(this).is(":checked")) {
$(this)
.siblings("[data-icon]")
.attr("data-prefix", "fas")
.closest(".launch-icon")
.addClass("checked");
} else {
$(this)
.siblings("[data-icon]")
.attr("data-prefix", "far")
.closest(".launch-icon")
.removeClass("checked");
}
}
});
$('input[name="sort"]').change();
});
.list-alt {
display: flex;
}
.launch-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
font-size: 22px;
padding: 12px
}
.launch-icon:hover,
.launch-icon.checked,
.launch-icon.checked [data-icon] {
color: #03a9f4;
}
<script src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-alt">
<label class="launch-icon">
<input type="radio" name="sort">
<i class="far fa-shopping-bag"></i>
</label>
<label class="launch-icon">
<input type="radio" name="sort">
<i class="far fa-stream"></i>
</label>
<label class="launch-icon">
<input type="radio" name="sort">
<i class="far fa-train"></i>
</label>
</div>
I think this is what you are looking for. Your javascript was looking little bit confusing so I've changed a bit.
$(function() {
var allRadios = $(".list-alt input[type='radio']");
$(allRadios).click(function() {
// reset all checkbox to original state
allRadios.each(function(i, elm) {
var icon = $(elm).next("svg");
icon.attr("data-prefix", "far");
$(elm).parents("label").removeClass("checked");
});
// change the checked checkbox's icon
$(this).next("svg").attr("data-prefix", "fas");
$(this).parents("label").addClass("checked");
});
});
.list-alt {
display: flex;
}
.launch-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
font-size: 22px;
padding: 12px
}
.launch-icon:hover,
.launch-icon.checked,
.launch-icon.checked [data-icon] {
color: #03a9f4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<div class="list-alt">
<label class="launch-icon">
<input type="radio" name="sort">
<i class="far fa-shopping-bag"></i>
</label>
<label class="launch-icon">
<input type="radio" name="sort">
<i class="far fa-stream"></i>
</label>
<label class="launch-icon">
<input type="radio" name="sort">
<i class="far fa-train"></i>
</label>
</div>
Im triying to make this box 1:1 with css, but I have so low css skills. Picture of the box -> http://prntscr.com/l6kyob (left - when checkbox clicked, right - when its not), live demo here -> https://victorthemes.com/themes/glazov/gallery/photography-trend/
That's what I've done so far
jQuery(document).ready(function($){
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
});
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="usergalleryimages[]" value="">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="usergalleryimages[]" value="">
<i class="fa fa-check hidden"></i>
</label>
</div>
Please, give me some hints how I can do this.
Thank you!!!
<input id='chk0' type='checkbox'> <label for="chk0"></label>
For CSS, input/label pairs do the following:
Tags
Place the checkbox before the label
Place anything that changes "state" (ex. off/on) after or within the label
Attributes
Assign #id to checkbox and a .class that is shared by all checkboxes
Assign for to label with the value of checkbox #id
CSS
Use the adjacent sibling combinator and the pseudo-class :checked like so:
.classOfCheckbox:checked + label .fa-check {
display: block;
}
.classOfCheckbox:checked + label .fa-times {
display: none;
}
Demo
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.chk {
display: none;
}
.chk:checked+.image-checkbox {
border-color: #4783B0;
}
.image-checkbox .fas {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.fa-check {
display: none;
}
.chk:checked+.image-checkbox .fa-check {
display: block !important;
}
.chk:checked+.image-checkbox .fa-times {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<input id="chk0" class="chk" type="checkbox" name="usergalleryimages[]" value="">
<label class="image-checkbox" for="chk0">
<img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/Proofing-three.jpg" />
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<input id="chk1" class="chk" type="checkbox" name="usergalleryimages[]" value="">
<label class="image-checkbox" for="chk1">
<img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/11/G-Proofing-six.jpg" />
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
</label>
</div>
I have 3 radio buttons that are tied to a function that supposed to change an image inside a div when each button is checked. It's working ok but when I adding CSS style to it so the actual checker won't be visible to only the icons I set will show, it'makes it uncheckable.
Note: when I remove the #sm-jum-btns input CSS and the checkers actually visible the code working. I need it to work also when those checkers are hidden and designed.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
<input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
</div>
<script type="text/javascript">
function changeImg(){
var jumImg = document.getElementById("jum-img");
var radioLeft = document.getElementById("radio_left");
var radioRight = document.getElementById("radio_right");
var radioMiddle = document.getElementById("radio_middle");
if (radioLeft.checked){
jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
}
if (radioRight.checked){
jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
}
if (radioMiddle.checked){
jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
}
}
</script>
CSS:
#sm-jum-btns input {
margin:0;
padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
margin-top: 180px;
}
#sm-jum-btn {
position: relative;
}
.fa-circle-thin {
color: #ffb300;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bold;
}
.fa-circle-thin::before {
position: absolute;
padding: 3.5px;
margin-top:3.5px;
}
.fa-circle {
color: #ffb300;
width: 50px;
height: 50px;
line-height: 50px;
border-radius:50px;
font-size: 30px;
}
.fa-circle-thin:hover {
color: #37100B;
}
#main-jum {
padding: 0;
}
#main-jum img {
width: 100%;
min-height: 400px;
object-fit:cover;
}
Ok after two days of searching and asking I figure it out thanks to this answer.
Basically I should add a for attribute in each label to point it to it's parent input id so it can actually check the input and trigger the function.
more about for attribute you can find here