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
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>
function togchq3chn(x) {
for (i = 1; i < 10; i++) {
var k = "kd" + i;
var c = "cd" + i;
if (x.id == k) {
document.getElementById(c).style.display = "block";
}
}
}
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
</body>
</html>
Once i click on the check box it get selected but if i again click on the same check box the yes tick is not getting disabled.
I try that else section else{document.getElementById(c).style.display = "none";} but when i do this code. at time one checkbox i can get selected. this will work like a toggled.
Requirement: On the checkbox if i click again the yes tick will get respective checkbox yest tick disappeared.
You don't need to give one unique ID to each <div> and to each <i>. You don't need to loop 10 times on click, generate IDs, test if each ID matches the element you clicked, then show/hide another element with a composed ID.
What you are trying to do can be done with a simple toggle() on click. (And one jQuery!)
$(".chqsqr").click(function() {
$(this).find("i").toggle()
});
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
i.fas {
position: relative;
display: none;
top: -2px;
left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3">
<i class="fas fa-check" ></i>
</div>
</div>
If I understood your question then you wanted something like this?
function clickFunction(prop){
var nameProp = document.getElementsByName(prop.name);
var idProp = document.getElementById(prop.id);
if (idProp.checked) {
for(var i=0; i < nameProp.length; i++){
nameProp[i].disabled = false;
}
}
}
<tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>
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>
The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.
Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;
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>