I'm fairly new to javascript so I thought about creating a simple checklist with buttons that work as checkboxes. I set up HTML for buttons and made the script with a function for the checking them. Below is my code.
var checkbox1 = $("#checkbox1");
checkbox1.on("click", function() {
checkbox1.toggleClass("checked");
if (checkbox1.hasClass("checked")) {
checkbox1.html('<i class="material-icons">check</i>');
} else {
checkbox1.text("");
}
});
var checkbox2 = $("#checkbox2");
checkbox2.on("click", function() {
checkbox2.toggleClass("checked");
if (checkbox2.hasClass("checked")) {
checkbox2.html('<i class="material-icons">check</i>');
} else {
checkbox2.text("");
}
});
var checkbox3 = $("#checkbox3");
checkbox3.on("click", function() {
checkbox3.toggleClass("checked");
if (checkbox3.hasClass("checked")) {
checkbox3.html('<i class="material-icons">check</i>');
} else {
checkbox3.text("");
}
});
*{
margin: 0;
/*color: #fff;*/
}
body {
background-color: #0f0f0f;
}
p {
line-height: 30px;
padding-left: 15px;
}
.task {
background-color: #cbcbcb;
display: flex;
border-radius: 30px;
margin: 15px;
}
.box {
width: 30px;
height: 30px;
}
.checkbox {
border-radius: 50%;
padding: 0;
width: 30px;
height: 30px;
border: none;
}
.checkbox.checked {
background-color: #0d88ce;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="task">
<div class="box">
<button id="checkbox1" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox2" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox3" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
Is there a way to merge all these functions for each element where the only id of it changes?
I think you're looking for a class selector. What you'd end up with is something like this:
var checkboxes = $(".checkbox");
checkboxes.on("click", function() {
$(this).toggleClass("checked");
if ($(this).hasClass("checked")) {
$(this).html('<i class="material-icons">check</i>');
} else {
$(this).text("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="checkbox1" class="checkbox" type="button" name="button"></button>
<button id="checkbox2" class="checkbox" type="button" name="button"></button>
<button id="checkbox3" class="checkbox" type="button" name="button"></button>
Sure.
Gather all the checkboxes up into a collection. You've already given all of them the checkbox class, so that's the simplest way.
Loop over the collection and give each checkbox a reference to a
common event callback function.
That function will run in the context of the checkbox that was
clicked, so the this keyword will reference that checkbox making
the id irrelevant.
By passing this to the JQuery object you can use the JQuery API.
// Find all the checkboxes by their class and loop over them:
$(".checkbox").each(function(idx, box){
// Set up an event handler for each one
$(box).on("click", function(evt) {
// In the callback, this will reference the checkbox that was clicked
// but we'll wrap it in the JQuery object so we can use it with JQuery
var $this = $(this);
$this.toggleClass("checked");
if ($this.hasClass("checked")) {
$this.html('<i class="material-icons">check</i>');
} else {
$this.text("");
}
});
});
*{
margin: 0;
/*color: #fff;*/
}
body {
background-color: #0f0f0f;
}
p {
line-height: 30px;
padding-left: 15px;
}
.task {
background-color: #cbcbcb;
display: flex;
border-radius: 30px;
margin: 15px;
}
.box {
width: 30px;
height: 30px;
}
.checkbox {
border-radius: 50%;
padding: 0;
width: 30px;
height: 30px;
border: none;
}
.checkbox.checked {
background-color: #0d88ce;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div class="task">
<div class="box">
<button id="checkbox1" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox2" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="box">
<button id="checkbox3" class="checkbox" type="button" name="button"></button>
</div>
<p> Some text</p>
</div>
</body>
<script type='text/javascript' src='script.js'></script>
</html>
You could also achieve the same behavior without using JavaScript, just use a hidden checkbox and use the :checked pseudo-class selector together with the for attribute from the <label> element.
* {
margin: 0;
}
body {
background-color: #0f0f0f;
}
p {
line-height: 30px;
padding-left: 15px;
}
.task {
background-color: #cbcbcb;
display: flex;
border-radius: 30px;
margin: 15px;
}
.custom-checkbox {
display: block;
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
color: white;
}
.custom-checkbox .input {
display: none;
}
.custom-checkbox .label {
background-color: #ddd;
display: block;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.custom-checkbox .icon {
display: none;
pointer-events: none;
position: absolute;
z-index: 2;
text-align: center;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-checkbox .input:checked ~ .label {
background-color: #0d88ce;
}
.custom-checkbox .input:checked ~ .icon {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="task">
<div class="custom-checkbox">
<input id="checkbox1" class="input" type="checkbox" />
<label for="checkbox1" class="label"></label>
<i class="icon material-icons">check</i>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="custom-checkbox">
<input id="checkbox2" class="input" type="checkbox" />
<label for="checkbox2" class="label"></label>
<i class="icon material-icons">check</i>
</div>
<p> Some text</p>
</div>
<div class="task">
<div class="custom-checkbox">
<input id="checkbox3" class="input" type="checkbox" />
<label for="checkbox3" class="label"></label>
<i class="icon material-icons">check</i>
</div>
<p> Some text</p>
</div>
</body>
</html>
Related
I'm creating a "social media comment section" (you can add your own comments by typing in a comment box at the bottom.) I want to add an edit button which can change as to what ever comment the edit button was clicked on. I am very unfamiliar with how do to do this. I've tried adding a click function that creates a text box where you can put text into but it creates the text box on every comment that has an edit button. How can I make the "Edit" button more specific to which ever comment was clicked?
$(document).ready(function(){
let value;
let storeValues = []
let storeValueName;
let storeValueComment;
$('#addComment').click(function(){
storeValueName = getName();
storeValueComment = getComment();
storeValues.push(storeValueName);
storeValues.push(storeValueComment);
value = getName() + getComment();
function getName(){
let grabName;
$('#name').val(function(i, v){
grabName = v;
})
return grabName;
}
function getComment(){
let grabComment;
$('#bodyText').val(function(i, v){
grabComment = v;
})
return grabComment
}
console.log(storeValues);
$('.eachComment').prepend('<div class="comments">' +'<img class="imgClass" src="userImage.jpg">'+'<p class="nameVal">'
+ storeValueName +'</p>' + '<p class="commentVal">'+ storeValueComment +'</p>'+
'<input type="button" id="edit" value="Edit" />'+ '<input type="button" id="delete" value="Delete" />' + '</div>');
$('#edit').click(function(){
})
})
})
body{
background-color: #E5E5E5
}
#wholeForm{
margin: 0 auto;
width: 800px;
height: 400px;
position: relative;
background-color: #D3D3D3;
font-family: helvetica;
}
#question{
padding: 0px;
margin: 0px;
width: 780px;
height: 75px;
background-color: white;
padding:10px;
}
#nameOfPerson{
font-size:13px;
margin: 0;
padding: 0;
}
#commentOfPerson{
font-size:25px;
font-weight: bold;
margin: 0;
padding: 0;
}
.form2{
width: 800px;
height: 458px;
}
.comments{
background-color: white;
width: 780px;
height: 75px;
position: relative;
margin: 10px;
}
.form1{
padding:20px;
margin-bottom: 10px;
width: 758px;
position: absolute;
bottom: -10px;
background-color: white;
}
#addComment{
display: inline-block;
margin-left: 35px;
}
#name{
width: 125px;
}
#bodyText{
width: 500px;
}
.formInput{
display: inline-block;
}
.nameVal{
display: inline-block;
font-size: 12px;
position: absolute;
}
.commentVal{
display: inline-block;
position: absolute;
font-weight: bold;
font-size: 18px;
bottom: 5px;
}
.imgClass{
display: inline-block;
height: 65px;
width: 65px;
margin: 5px;
}
#edit{
position: absolute;
right:55px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#delete{
position: absolute;
right:0px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#edit:hover{
color:#DDA0DD
}
#delete:hover{
color:#DDA0DD
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div id='wholeForm'>
<div id="question">
<p id="nameOfPerson">WhySoSerious45</p>
<p id="commentOfPerson">Trying to decide a career path? Programming is the move. Change my mind.</p>
</div>
<div class='form2'>
<div class='eachComment'>
<div class="comments">
<img class="imgClass" src="userImage.jpg">
<p class="nameVal">Jonny R</p>
<p class="commentVal">I wish I knew how to program! Maybe ill start learning?</p>
<input type="button" id="edit" value="Edit">
<input type="button" id="delete" value="Delete">
</div>
</div>
</div>
<div class='form1'>
<div class='formInput'>
<input type="text" id="name" placeholder="Display Name"/>
<input type='text' id="bodyText" placeholder="Comment"></textarea>
</div>
<input type="button" id="addComment" value="Submit">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
To answer your question in a general sense…
When you add an event listener, the specific element will show up on the event's target property. So, if we had something like this:
<div class="posts">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
We could actually add a click handler to the div, because events "bubble" up to it.
document.querySelector('.posts').addEventListener('click' (e) => {
console.log(e.target.textContent); // Button 1, Button 2, etc.
});
I want multiple radio checkboxes. In one line it should be private or shared and in the second line, it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.small-img-group {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
.counter1 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
}
.counter2 {
float: left;
display: flex;
justify-content: space-between;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 15px;
}
.up,
.down {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
margin: 1px 1px;
cursor: pointer;
width: 15px;
line-height: 14px;
height: 16px;
text-align: center;
font-weight: bold;
border: 1px solid #000;
user-select: none;
}
.up:hover,
.down:hover {
color: #fd0b3f;
text-align: center;
}
.adults {
padding-right: 5px;
}
.children {
padding-right: 5px;
}
input {
appearance: none;
height: 21px;
text-align: center;
width: 42px;
line-height: 24px;
font-size: 15px;
border-radius: 5px;
}
.container {
display: flex;
}
input[type="radio"] {
display: none;
}
label[for=private] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
margin-right: 10px;
}
label[for=shared] {
position: relative;
color: orangered;
font-size: 20px;
border: 2px solid orangered;
border-radius: 5px;
align-items: left;
display: flex;
cursor: pointer;
}
input[type="radio"]:checked+label {
background-color: orangered;
color: white;
}
input[type="radio"]:checked+label:before {
height: 16px;
width: 16px;
border: 10px solid white;
background-color: orangered;
}
</style>
</head>
<body>
<section class="container sproduct my-5 pt-5">
<div class="row mt-5">
<div class="col-lg-5 col-md-12 col-12">
<img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<h6>Home / Morning Safari</h6>
<h3>Morning Safari</h3>
<h2> <label> Total:</label><label class="total Price"></label> </h2>
<div class="counter1">
<Label class="Adults">Adults</Label>
<div class='down' onclick='decreaseCount(event, this)'>-</div>
<input type='text' value='1' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="counter2">
<Label class="Children">Children</Label>
<div class='down' onclick='decreaseCount2(event, this)'>-</div>
<input type='text' value='0' readonly>
<div class='up' onclick='increaseCount(event, this)'>+</div>
</div>
<div class="container" style="padding-left: 0;padding-top: 5px;">
<div>
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function increaseCount(e, el) {
var input = el.previousElementSibling;
var value = parseInt(input.value, 10);
value = isNaN(value) ? 0 : value;
value++;
input.value = value;
}
function decreaseCount(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 1) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
function decreaseCount2(e, el) {
var input = el.nextElementSibling;
var value = parseInt(input.value, 10);
if (value > 0) {
value = isNaN(value) ? 0 : value;
value--;
input.value = value;
}
}
var MainImg = document.getElementById('MainImg');
var smallimg = document.getElementsByClassName('small-img');
smallimg[0].onclick = function() {
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function() {
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function() {
MainImg.src = smallimg[2].src;
}
smallimg[3].onclick = function() {
MainImg.src = smallimg[3].src;
}
</script>
</body>
</html>
Hi, I want multiple radio checkboxes. In one line it should be private or shared and in the second line it should be with ATV or Without ATV so people on my web can select shared and with ATV or many variables. so basically two selections are needed and 4four checkboxes are divided into two groups.
edited
i did what you said in comment it looks like this and its not same as private and shared
The name tags on your ATV checkboxes should be changed from "occupancy" to something else like "atv". You could also wrap each group of inputs in separate divs if you want them to appear in separate rows. Finally you should also make your ids unique and update you label for tags so:
<div class="container style1" style="padding-left: 0;padding-top: 5px;">
<div class="">
<input type="radio" name="occupancy" id="private" checked="checked">
<label for="private">Private</label>
<input type="radio" name="occupancy" id="shared">
<label for="shared">Shared</label>
</div>
<div>
<input type="radio" name="atv" id="withatv" checked="checked">
<label for="withatv">With ATV</label>
<input type="radio" name="atv" id="withoutatv">
<label for="withoutatv">Without ATV</label>
</div>
</div>
I added a style1 class to your container but maybe you might want to add that style directly to .container. Anyway add these styles:
.style1{
flex-direction:column;
}
label[for="private"], label[for="shared"] { {
display: inline-block;
}
I need to validate the checkbox checked or not before showing the popup static text
This HTML code contains the questions and answers that I give as static in JavaScript and contains the popup style code.
function validate() {
var checkboxes = document.getElementsByName("answer1");
var checkboxChecked = [];
for (var i = 0; i < checkboxes.length; i++) {
}
}
$(document).ready(function() {
$('#trigger').click(function() {
const question1answer1 = document.querySelectorAll('input[name="answer1"]');
for (const question1answer1ans of question1answer1) {
if (question1answer1ans.checked) {
document.getElementById('question1-answer-1').innerHTML = question1answer1ans.value;
}
}
const question1answer2 = document.querySelectorAll('input[name="answer2"]');
for (const question1answer2ans of question1answer2) {
if (question1answer2ans.checked) {
document.getElementById('question1-answer-2').innerHTML = question1answer2ans.value;
}
}
const question1answer3 = document.querySelectorAll('input[name="answer3"]');
for (const question1answer3ans of question1answer3) {
if (question1answer3ans.checked) {
document.getElementById('question1-answer-3').innerHTML = question1answer3ans.value;
}
}
const question1answer4 = document.querySelectorAll('input[name="answer4"]');
for (const question1answer4ans of question1answer4) {
if (question1answer4ans.checked) {
document.getElementById('question1-answer-4').innerHTML = question1answer4ans.value;
}
}
const question1answer5 = document.querySelectorAll('input[name="answer5"]');
for (const question1answer5ans of question1answer5) {
if (question1answer5ans.checked) {
document.getElementById('question1-answer-5').innerHTML = question1answer5ans.value;
}
}
const question1answer6 = document.querySelectorAll('input[name="answer6"]');
for (const question1answer6ans of question1answer6) {
if (question1answer6ans.checked) {
document.getElementById('question1-answer-6').innerHTML = question1answer6ans.value;
}
}
$('#question1overlay').fadeIn(300);
});
$('#question1close').click(function() {
$('#question1overlay').fadeOut(300);
});
});
#question1popup {
max-width: 600px;
width: 90%;
max-height: 600px;
height: 100%;
padding: 20px;
position: relative;
background: white;
color: green;
margin: 20px;
margin-left: 35em;
}
#question1popups {
max-width: 700px;
width: 90%;
max-height: 600px;
height: 82%;
padding: 20px;
position: relative;
background: black;
color: green;
margin: 20px auto;
}
#question1overlay {
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
display: none;
}
#question1overlays {
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
display: none;
}
#question1close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #fbfbfb;
background-color: black;
padding: 10px;
border-radius: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Activity needed packages -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<fieldset id="question1">
<legend>Pick the fruits from the following</legend>
<br>
<div class="row">
<div class="col-md-2">
<label><INPUT TYPE="checkbox" NAME="answer1" VALUE="banana"><br>banana</label>
</div>
<div class="col-md-2">
<label><INPUT TYPE="checkbox" NAME="answer2" VALUE="tomato"><br>tomato</label>
</div>
<div class="col-md-2">
<label><INPUT TYPE="checkbox" NAME="answer3" VALUE="carrot"><br>carrot</label>
</div>
<div class="col-md-2">
<label><INPUT TYPE="checkbox" NAME="answer4" VALUE="mango"><br>mango</label>
</div>
<div class="col-md-2">
<label><INPUT TYPE="checkbox" NAME="answer5" VALUE="onion"><br>onion</label>
</div>
<div class="col-md-2">
<label><INPUT TYPE="checkbox" NAME="answer6" VALUE="apple"><br>apple</label>
</div>
</div>
</fieldset>
<center><button id="trigger">Check answer</button></center>
<br>
<br>
<div id="question1overlay">
<div id="question1popup">
<div id="question1close"><i class="fas fa-times-circle"></i></div>
<h2 style="color: #4aa0dd;text-decoration-line: underline;">These are the Correct answers</h2>
<br>
<p style="color: green;"><b><i class="fas fa-arrow-circle-right"></i>  Option 1</b></p>
<p style="color: green;"><b><i class="fas fa-arrow-circle-right"></i>  Option 4</b></p>
<p style="color: green;"><b><i class="fas fa-arrow-circle-right"></i>  Option 6</b></p>
<h2 style="color: #4aa0dd;text-decoration-line: underline;">Your Answers</h2>
<p id="question1-answer-1" style="color: green;font-weight: bold;"></p>
<p id="question1-answer-2" style="color: red;font-weight: bold;"></p>
<p id="question1-answer-3" style="color: red;font-weight: bold;"></p>
<p id="question1-answer-4" style="color: green;font-weight: bold;"></p>
<p id="question1-answer-5" style="color: red;font-weight: bold;"></p>
<p id="question1-answer-6" style="color: green;font-weight: bold;"></p>
</div>
</div>
<br>
The javascript code given in static text and more script is written manually into the HTML code
instead given in particular js file script
Check using if-condition after button is clicked
$(document).ready(function() {
$('#trigger').click(function() {
//IF CONDITION
if($('.row input:checked').length <= 0){
alert('Please Choose Atleast One Option');
return 1;
}
When I make my carousel with the loop option set to true it's impossible to toggle a checkbox clicking on the label associated with it.
Here's an example with both situations:
let $carousel = $('.owl-carousel');
$carousel.owlCarousel({
items: 1,
loop: true,
});
document
.querySelector('#btnReloadWithoutLoop')
.addEventListener('click', function() {
$carousel.data('owl.carousel').options.loop = false;
$carousel.trigger('refresh.owl.carousel');
});
document
.querySelector('#btnReloadWithLoop')
.addEventListener('click', function() {
$carousel.data('owl.carousel').options.loop = true;
$carousel.trigger('refresh.owl.carousel');
});
* {
font-family: sans-serif;
}
.owl-carousel .item {
border: 1px solid #ccc;
max-width: 400px;
margin: auto;
padding: 20px;
}
.owl-carousel .item label {
transition: text-shadow .15s ease-in-out;
}
.owl-carousel .item input[type="checkbox"]:checked+label {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.btn-group {
display: flex;
flex-direction: column;
padding-top: 10px;
border-top: 1px solid #ccc;
}
.btn-group>button+button {
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<form>
<input type="checkbox" name="test" id="test-checkbox">
<label for="test-checkbox">Test label</label>
</form>
</div>
<div class="item">
<form>
<input type="checkbox" name="test" id="test-checkbox-2">
<label for="test-checkbox-2">Test label</label>
</form>
</div>
</div>
<div class="btn-group">
<button id="btnReloadWithoutLoop">
Reload WITHOUT the loop option
</button>
<button id="btnReloadWithLoop">
Reload WITH the loop option
</button>
</div>
Adding a click event listener to the document.body shows that clicking on the label registers two click events. It seems as though the carousel plugin may be firing a click event on the checkbox also, using the for attribute of the label, causing an immediate checked="checked" to checked="false" state.
You can work around this by adding the input inside the label [1], and removing the label's for attribute. The plugin doesn't appear to trigger a "double" click event when doing so.
Short Answer
Change:
<form>
<input type="checkbox" name="test" id="test-checkbox">
<label for="test-checkbox">Test label</label>
</form>
To:
<form>
<label>
<input type="checkbox" name="test" id="test-checkbox-2">
Test label
</label>
</form>
Full Answer:
let $carousel = $('.owl-carousel');
$carousel.owlCarousel({
items: 1,
loop: true,
});
document
.querySelector('#btnReloadWithoutLoop')
.addEventListener('click', function() {
$carousel.data('owl.carousel').options.loop = false;
$carousel.trigger('refresh.owl.carousel');
});
document
.querySelector('#btnReloadWithLoop')
.addEventListener('click', function() {
$carousel.data('owl.carousel').options.loop = true;
$carousel.trigger('refresh.owl.carousel');
});
* {
font-family: sans-serif;
}
.owl-carousel .item {
border: 1px solid #ccc;
max-width: 400px;
margin: auto;
padding: 20px;
}
.owl-carousel .item label {
transition: text-shadow .15s ease-in-out;
}
.owl-carousel .item input[type="checkbox"]:checked+label {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.btn-group {
display: flex;
flex-direction: column;
padding-top: 10px;
border-top: 1px solid #ccc;
}
.btn-group>button+button {
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<form>
<label>
<input type="checkbox" name="test" id="test-checkbox">
Test label
</label>
</form>
</div>
<div class="item">
<form>
<label>
<input type="checkbox" name="test" id="test-checkbox-2">
Test label
</label>
</form>
</div>
</div>
<div class="btn-group">
<button id="btnReloadWithoutLoop">
Reload WITHOUT the loop option
</button>
<button id="btnReloadWithLoop">
Reload WITH the loop option
</button>
</div>
I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>
You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.
You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.
You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.
first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}