28.10.2022, 12:11
Kann mir einer helfen. Ich wollte wissen ob es möglich ist hier eine Mehrfachauswahl für umfragen festzulegen.
Zum Beispiel 3 Abstimmungen von 4 Antworten.
Über Hilfe würde ich mich freuen.
Zum Beispiel 3 Abstimmungen von 4 Antworten.
Über Hilfe würde ich mich freuen.
PHP-Code:
const options = document.querySelectorAll("label");
for (let i = 0; i < options.length; i++) {
options[i].addEventListener("click", ()=>{
for (let j = 0; j < options.length; j++) {
if(options[j].classList.contains("selected")){
options[j].classList.remove("selected");
}
}
options[i].classList.add("selected");
for (let k = 0; k < options.length; k++) {
options[k].classList.add("selectall");
}
let forVal = options[i].getAttribute("for");
let selectInput = document.querySelector("#"+forVal);
let getAtt = selectInput.getAttribute("type");
if(getAtt == "checkbox"){
selectInput.setAttribute("type", "radio");
}else if(selectInput.checked == true){
options[i].classList.remove("selected");
selectInput.setAttribute("type", "checkbox");
}
let array = [];
for (let l = 0; l < options.length; l++) {
if(options[l].classList.contains("selected")){
array.push(l);
}
}
if(array.length == 0){
for (let m = 0; m < options.length; m++) {
options[m].removeAttribute("class");
}
}
});
}
Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: FAFAFA;
}
.wrapper{
padding: 30px;
background: #fff;
max-width: 500px;
width: 100%;
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1);
}
@media (max-width:675px){
.wrapper{
max-width: 300px;
}
}
.wrapper header{
font-size: 22px;
font-weight: 600;
}
.wrapper .poll-area{
margin: 20px 0 15px 0;
}
.poll-area label{
display: block;
margin-bottom: 10px;
padding: 8px 15px;
border: 2px solid #e6e6e6;
transition: all 0.2s ease;
}
label.opt-1.selected {
border: 2px solid #cf2d00;
}
label.opt-2.selected {
border: 2px solid #4bcc00;
}
label.opt-3.selected {
border: 2px solid #cfbd00;
}
label.opt-4.selected {
border: 2px solid #01638c;
}
div#pstyle1::after {
background: #cf2d00 !important;
}
div#pstyle2::after {
background: #4bcc00 !important;
}
div#pstyle3::after {
background: #cfbd00 !important;
}
div#pstyle4::after {
background: #01638c !important;
}
label.opt-1.selected .row .circle{
border-color: #cf2d00 !important;
}
label.opt-2.selected .row .circle{
border-color: #4bcc00 !important;
}
label.opt-3.selected .row .circle{
border-color: #cfbd00 !important;
}
label.opt-4.selected .row .circle{
border-color: #01638c !important;
}
label.opt-1 .row .circle::after{
background: #cf2d00 !important;
}
label.opt-2 .row .circle::after{
background: #4bcc00 !important;
}
label.opt-3 .row .circle::after{
background: #cfbd00 !important;
}
label.opt-4 .row .circle::after{
background: #01638c !important;
}
label .row{
display: flex;
pointer-events: none;
justify-content: space-between;
}
label .row .column{
display: flex;
align-items: center;
}
label .row .circle{
height: 19px;
width: 19px;
display: block;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 10px;
position: relative;
}
label .row .circle::after{
content: "";
height: 11px;
width: 11px;
border-radius: inherit;
position: absolute;
left: 2px;
top: 2px;
display: none;
}
.poll-area label:hover .row .circle::after{
display: block;
background: #e6e6e6;
}
label.selected .row .circle::after{
display: block;
}
label .row span{
font-size: 16px;
font-weight: 500;
}
label .row .percent{
display: none;
}
label .progress{
height: 7px;
width: 100%;
position: relative;
background: #f0f0f0;
margin: 8px 0 3px 0;
border-radius: 30px;
display: none;
pointer-events: none;
}
label .progress:after{
position: absolute;
content: "";
height: 100%;
background: #ccc;
width: calc(1% * var(--w));
border-radius: inherit;
transition: all 0.2s ease;
}
label.selectall .progress,
label.selectall .row .percent{
display: block;
}
input[type="radio"],
input[type="checkbox"]{
display: none;
}Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RustFlash | Umfrage</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>What Design tool do you use the most? <br></header>
<div class="poll-area">
<input type="checkbox" name="poll" id="opt-1">
<input type="checkbox" name="poll" id="opt-2">
<input type="checkbox" name="poll" id="opt-3">
<input type="checkbox" name="poll" id="opt-4">
<label for="opt-1" class="opt-1">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">Photoshop</span>
</div>
<span class="percent">55%</span>
</div>
<div class="progress" id="pstyle1" style='--w:55;'></div>
</label>
<label for="opt-2" class="opt-2">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">Sketch</span>
</div>
<span class="percent">20%</span>
</div>
<div class="progress" id="pstyle2" style='--w:80;'></div>
</label>
<label for="opt-3" class="opt-3">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">Adobe XD</span>
</div>
<span class="percent">20%</span>
</div>
<div class="progress" id="pstyle3" style='--w:20;'></div>
</label>
<label for="opt-4" class="opt-4">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">Figma</span>
</div>
<span class="percent">96%</span>
</div>
<div class="progress" id="pstyle4" style='--w:96;'></div>
</label>
</div>
</div>
<script src="javascript/script.js"></script>
</body>
</html>