简体   繁体   English

如何在带有复选框按钮的HTML弹出屏幕中显示结果

[英]How to Display results in a pop-up screen in HTML with checkbox buttons

I would like to display the results of checkbox button selection in a pop-up screen: for example if I selected from below: A. Airconditioning and e. 我想在弹出屏幕中显示复选框按钮选择的结果:例如,如果我从下面选择:A.空调和e。 Dishwasher. 洗碗机。 I want a pop-up screen that says "You Have Selected Air Conditioning and Dishwasher" that will be displayed in a click of a button lets call it "display". 我想要一个弹出屏幕,显示“您已经选择了空调和洗碗机”,只需单击一下按钮即可显示该屏幕,将其称为“显示”。

       <table name="BuyProduct" id ="BuyProduct_H" style="width:100%;" >

        <tr>                
            <td class="auto-style2" colspan="3">1-&nbsp;&nbsp;&nbsp;&nbsp; What were the products that you bought?          </tr>
        <tr>
            <td class="auto-style53"></td>
            <td colspan="2" class="auto-style54">
                <input id="cbconditioning" type="checkbox"  onclick="Chosen()" />a. Air Conditioning</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td colspan="2">
                <input id="cbradio" type="checkbox"  onclick="Chosen()"/>b. TV Radio (TV, Home Theatre, etc.)</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td colspan="2">
                <input id="cbrefrigeration" type="checkbox"  onclick="Chosen()"/>c. Refrigeration</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td colspan="2">
                <input id="cblaundry" type="checkbox"  onclick="Chosen()"/>d. Laundry (Washer, Dryer, etc)</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td colspan="2">
                <input id="cbdishwasher" type="checkbox"  onclick="Chosen()" />e. Dishwasher</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td colspan="2">
                <input id="cbtreatment" type="checkbox"  onclick="Chosen()"/>f. Water Treatment (Water Dispencer)</td>
        </tr>
        <tr>
            <td class="auto-style57"></td>
            <td colspan="2" class="auto-style58">
                <input id="cbhousewares" type="checkbox"  onclick="Chosen()"/>g. Small Housewares (Microwave, Kitchen appliances, etc.)<br />
            </td>
        </tr>
        <tr>
            <td class="auto-style59"></td>
            <td colspan="2" class="auto-style60">
                <input id="cbothers" type="checkbox"  onclick="Chosen()"/>h. Others Please Specify</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td class="auto-style51"></td>
            <td>
    <asp:TextBox ID="TextBox26" runat="server"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="auto-style28">&nbsp;</td>
            <td colspan="2">
                &nbsp;</td>
        </tr>
        <input type="button" id="chosenlaunch" onclick="Chosen()" value="Equipments Purchased"/>
        </table>

This is the script that I worked on so far but it shows multiple popups instead of one including all the checked results: 到目前为止,这是我一直在使用的脚本,但是它显示了多个弹出窗口,而不是包含所有检查结果的弹出窗口:

  function Chosen() {
        if (document.getElementById('cbconditioning').checked == true) {
            alert("You Chose Air Conditioning");
        }
         if (document.getElementById('cbradio').checked == true) {
            alert("You Chose Radio");
        }
         if (document.getElementById('cbrefrigeration').checked == true) {
            alert("You Chose Refrigeration")
        }
         if (document.getElementById('cblaundry').checked == true) {
            alert("You Chose Laundry")
        }
         if (document.getElementById('cbdishwasher').checked == true) {
            alert("You Chose Dishwasher")
        }
         if (document.getElementById('cbtreatment').checked == true) {
            alert("You Chose Treatment")
        }
         if (document.getElementById('cbhousewares').checked == true) {
            alert("You Chose Housewares")
        }
         if (document.getElementById('cbothers').checked == true) {
            alert("You Chose Others")
        }

    }

You can achieve it using jquery dialog box , there are many ways , I am not giving my code here rather giving you the link , try this 您可以使用jquery对话框来实现它,有很多方法,我不在这里提供代码,而是给您链接,尝试一下

JQuery dialog jQuery对话框

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM