Toggle quiz form visibility based on checkbox state.

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <div id="allow-quiz">
                <input type="checkbox" name="quizcheckbox" id="quiz-checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"> <label for="quizcheckbox">Stajirovka uchun test ham qo'shasizmi?</label>
            </div>
            <div id="quiz-form">
                <label id="titlequiz" class="hidden block mb-2 font-semibold">Test sinovi nomi 📃</label>
                <input type="text" placeholder="SQL bo'yicha bilimlarni sinash" name="titlequiz" id="quiz-title" class="w-full border border-gray-300 rounded px-3 py-2 mb-4 hidden">
            </div>

JavaScript

let quiz = state({
    checked: false
})

$('#quiz-checkbox').on('change', ()=> {
    quiz.checked = !quiz.checked
    console.log(quiz.checked)
});

watch(()=> quiz.checked, value => {
    if(value === false) {
        $('#quiz-form').hide()
        console.log(value)
    } else { 
        $('#quiz-form').show()
        console.log(value) 
    }
})