Vorrei che il pulsante toggle onclick inviasseanche un payload ad esempio 30 e' possibile

General
1 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="buttons">
    <label>
    
<input type="checkbox" name="check" id="check" onclick="toggle()">

    <span id="text">30°</span>
  </label>
</div>
<style>
  
body{
    width: 100% !important;
    height: 100%!important;
    
  
    background: #333;
  
    
}
.nr-dashboard-theme .nr-dashboard-template {
background-color: #333 !important;
width: 400px!important ;
height: 400px !important;
top:0px!important ;

}
.nr-dashboard-theme.ui-card-panel {
/* Aggiungi qui i tuoi stili personalizzati */
background-color: white; /* Cambia il colore di sfondo a bianco */
border: 2px solid #005B97; /* Aggiungi una bordatura con colore personalizzato */
padding: 10px; /* Aggiungi un margine interno di 10px */
}

.nr-dashboard-cardcontainer {
/* Aggiungi qui i tuoi stili personalizzati */
background-color: lightgray; /* Cambia il colore di sfondo a bianco */
}
.prova{
    position:relative;
    top:20px !important;
    left:150px;



}
.buttons label{

position: relative;
width: 60px;
height:60px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
top: 20px;
left: 20px;
}

.buttons label input{
appearance: none;
}


.buttons label input:checked + span
{
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35),
inset 0 5px 5px rgba(0, 0, 0, 0.5),
inset 0 15px 25px rgba(0, 0, 0, 0.35);
}

.buttons label input:checked + span::before
{
content: '';
position: absolute;
inset: 5px 3px;
border-top: 1px solid #080707;
filter: blur(2px);
}



.checked {
color: #fff !important;
text-shadow: 0 0 5px #219cf3, 0 0 8px #219cf3 !important;
}
.buttons label span {
position: absolute;
width: 70px;
height: 70px;
background: linear-gradient(#555353, #363535, #303030);
border: 2px solid #222;
border-radius: 50%;
box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.35), 0 5px 5px rgba(0, 0, 0, 0.5), 0 15px 25px rgba(0, 0, 0, 0.35);
align-items: center;
text-align: center;
color: #010101; /* Colore rosso */
font-size:30px; /* Dimensione del carattere */
font-weight: bold;
line-height: 70px;
top:30px;
left :50px;
}



 </style>
<script>
    function toggle() {
        var textSpan = document.getElementById('text');
        var checkbox = document.getElementById('check');

        if (checkbox.checked) {
            // Set the span color to white
            textSpan.style.color = 'white';
        } else {
            // Restore the original color of the span
            textSpan.style.color = '';
        }
    }

 
</script>
2

Please do not double post.