时间戳

首页 > 解决方案 > 使用 html、css 和 javascript 在点击时弹出每个复选框

javascript - 使用 html、css 和 javascript 在点击时弹出每个复选框

问题描述

我需要有关如何在“是”和“否”的每个复选框中弹出的帮助。我需要这些 html 代码在它们的每个复选框上弹出。

<div class="col-md-12 form-group" style="display: inline-flex;">
     <p>1. Do You Have a Written Mission Statement?</p>                         
     <input type="checkbox" id="yes" name="boolean" value="Yes">
     <label for="yes"></label>Yes</label>  
     <input type="checkbox" id="no" name="boolean" value="No">
     <label for="no">No</label>
</div>
<div class="col-md-12 form-group" style="display:inline-flex;"> 
     <p>2. Do You Have a Written Vision Statement?</p>
     <input type="checkbox" id="yes" name="boolean" value="Yes">
     <label for="yes">Yes</label>
     <input type="checkbox" id="no" name="boolean" value="No">
     <label for="no">No</label>
     </div>
<div class="col-md-12 form-group" style="display:inline-flex;"> 
     <p>3. Do You Have a Logo?</p>
     <input type="checkbox" id="yes" name="boolean" value="Yes">
     <label for="yes">Yes</label>
     <input type="checkbox" id="no" name="boolean" value="No">
     <label for="no">No</label>
</div>
<div class="col-md-12 form-group" style="display:inline-flex;"> 
     <p>4. Do You Have a strategic Position?</p>
     <input type="checkbox" id="yes" name="boolean" value="Yes">
     <label for="yes">Yes</label>
     <input type="checkbox" id="no" name="boolean" value="No">
     <label for="no">No</label>
</div>

它们上的每个复选框都需要弹出一个

标签： javascripthtmlcss

解决方案

<html>

<head>
    <script>
        function validateCheck(check, message) {
            if (check.checked) {
                dialog.show();
                var x = document.getElementById("content");
                x.innerHTML = message
            } else {
                dialog.close();
            }
        }
    </script>
    <style>
        #dialog {
            position: fixed;
            background: #fff;
            border-radius: 7px;
            width: 300px;
            z-index: 10;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed
        }
    </style>
</head>

<body>

    <div class="col-md-12 form-group" style="display: inline-flex;">
        <p>1. Do You Have a Written Mission Statement?</p>
        <input type="checkbox" id="yes" name="boolean" value="Yes" onchange="validateCheck(this,'Good choice')" />
        <label for="yes"></label>Yes</label>
        <input type="checkbox" id="no" name="boolean" value="No" onchange="validateCheck(this,'Bad choice');" />
        <label for="no">No</label>
    </div>
    <dialog id="dialog">
        <form method="dialog">
            <h2>Definition</h2>
            <p id="content"></p>
            <menu>
                <button id="confirmBtn" value="default">OK</button>
            </menu>
        </form>
    </dialog>

</body>

</html>

尝试这个

<html>

<head>
    <script>
        function validateCheck(check, message) {
            if (check.checked) {
                alert(message)
            }
        }
    </script>
</head>

<body>

    <div class="col-md-12 form-group" style="display: inline-flex;">
        <p>1. Do You Have a Written Mission Statement?</p>
        <input type="checkbox" id="yes" name="boolean" value="Yes" onchange="validateCheck(this,'Good choice')" />
        <label for="yes"></label>Yes</label>
        <input type="checkbox" id="no" name="boolean" value="No" onchange="validateCheck(this,'Bad choice');" />
        <label for="no">No</label>
    </div>
</body>

</html>

推荐阅读