如何添加单选按钮和复选框将选择输入到一起以形成JavaScript输出

How to Add radio buttons and Check-boxes Input selections together to form an output in JavaScript

本文关键字：到一起 输入 选择 输出 JavaScript 复选框 何添加 添加 单选按钮      更新时间：2023-09-26

我创建了一个热饮程序，您可以使用单选按钮选择想要的饮料类型，然后使用复选框选择饮料，即糖、牛奶、蜂蜜。我将如何使用javascript创建一个输出，以显示用户已经选择了，例如，加糖和牛奶的茶？

成分：

  <ul>
    <li><input type="radio" id="Tea"       name="ingred" value="teabag"              />  Teabag</li>
    <li><input type="radio" id="Coffee"    name="ingred" value="coffee_beans"        />  Coffee Beans</li>
    <li><input type="radio" id="Chocolate" name="ingred" value="chocolate_granules"  />  Hot Chocolate Granules</li>
    <li><input type="radio" id="Bovril"    name="ingred" value="bovril_sludge"       />  Bovril Sludge</li>
    <li><input type="button" value="OK"    onclick="testRadioButtons()" /></li>
  </ul>
  </div>

    <img id="beverageholder" src="images/placeholder.gif" alt="Image gallery" />

    <p><label for="extra">Extras:</label></p>
   <ul>
     <li><input type="checkbox" id="Milk"  name="extras" value="milk" />Milk</li>
     <li><input type="checkbox" id="White" name="extras" value="whiteSugar" />White Sugar</li>
     <li><input type="checkbox" id="Brown" name="extras" value="brownSugar" />Brown Sugar</li>
     <li><input type="checkbox" id="Honey" name="extras" value="honey" />Honey</li>
     <li><input type="button" value="OK" onclick="testCheckBoxes()" /></li>
   </ul>
   <div id="extraDesign"/>
        <!--The unchecked images are used as placeholders -->
        <img id="fuelplaceholder"        src="images/curtains1.jpg" alt="Fuel filler crossed out"      width="275px" height="250" style="border-style: solid; border-color: #FF0000; s" />
        <img id="tyresplaceholder"       src="images/curtains2.jpg" alt="Race tyres crossed Out"       width="275px" height="250" style="border-style: solid; border-color: #FF0000; s"/>
        <img id="suspensionplaceholder"  src="images/curtains3.jpg" alt="Shock absorbers crossed Out"  width="275px" height="250" style="border-style: solid; border-color: #FF0000; s" />
        <img id="suspensionplaceholder2" src="images/curtains4.jpg" alt="Fuel filler crossed out"      width="275px" height="250" style="border-style: solid; border-color: #FF0000; s" />
   </div>

 nbsp nbsp nbsp nbsp nbsp nbsp nbsp 您的饮料

您的饮料在这里等待：

您的热饮是：

我希望有一张图片，显示用户选择单选按钮和复选框后显示的饮料类型，然后按下提交以显示结果。

刚刚开始用JavaScript学习理论，但仍在掌握它的实用方面。

下面是一个可能方法的快速示例，不过在我继续之前，有几个想法：

1.通过将类应用于id为"hideMe"的元素，可以使其不可见。如果没有选中任何复选框，你应该设置这个类，否则你会清除它。这个类将是一个css选择器-一个"启用或不启用"隐藏元素的样式的选择器。如果你喝的饮料没有任何额外的东西，那么在饮料名称后面加上文字"with"是没有意义的

2.我刚刚获取了您设置为ID的文本，用它来显示用户的选择。您最好添加一个属性（比如dispText），将显示文本分配给它。

E.g<li><input type="checkbox" id="White" name="extras" value="whiteSugar" dispText='White Sugar'/>White Sugar</li>

然后可以使用.getAttribute('dispText')而不是.id 提取

E.gbyId('drinkResult').innerHTML = radioList[i].getAttribute('dispText')；

这样做意味着你会显示文本"White Sugar"，而不是目前的"White"。

3.由于一次只能在一个组中选择一个单选按钮，因此当按下一个时，不需要遍历它们的集合。您只需将一个处理程序附加到对象，即可处理click事件。由于处理程序附加到每个radio元素，实际上是它的一部分，因此函数可以使用关键字this访问该元素。您可以为每个单选按钮附加相同的功能。该函数只需获取触发它的任何元素的文本，然后将其保存到某个地方。不过，您仍然需要在启动时迭代无线电的集合——这将允许您在HTML中设置一个默认选项，javascript在页面加载时反映该默认选项。

4.document.querySelectorAll的使用是HTML规范的最新添加。它不适用于较旧的浏览器-请查看它是何时推出的以及兼容的浏览器，看看它是否适合您。

Javascript:

function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);
function mInit()
{
    var radioList = document.querySelectorAll('input[type=radio]');
    var i, n = radioList.length;
    for (i=0; i<n; i++)
    {
        radioList[i].addEventListener('click', onIngredRadioClick, false);
        if (radioList[i].checked)
            byId('drinkResult').innerHTML = radioList[i].id;
    }
    var checkList = document.querySelectorAll('input[type=checkbox]');
    n = checkList.length;
    for (i=0; i<n; i++)
    {
        checkList[i].addEventListener('click', onExtrasCheckboxClick, false);
    }
}
function onIngredRadioClick(e)
{
    var curSel = this.id;
    byId('drinkResult').innerHTML = curSel;
}
function onExtrasCheckboxClick(e)
{
    var checkList = document.querySelectorAll('input[type=checkbox]');
    var i, n = checkList.length;
    var msg = '';
    for (i=0; i<n; i++)
    {
        if (checkList[i].checked)
        {
            // add a comma in front of all items except the first
            // adding it after each element often leaves us with a 
            // 'dangling' comma as the last character in the line.
            if (msg.length != 0)
                msg += ',';
            msg += checkList[i].id;
        }
    }
    byId('extrasResult').innerHTML = msg;
}

HTML:

<p>Drinks:</p>
<ul>
    <li><input type="radio" id="Tea"       name="ingred" value="teabag" checked      />Teabag</li>
    <li><input type="radio" id="Coffee"    name="ingred" value="coffee_beans"        />Coffee Beans</li>
    <li><input type="radio" id="Chocolate" name="ingred" value="chocolate_granules"  />Hot Chocolate Granules</li>
    <li><input type="radio" id="Bovril"    name="ingred" value="bovril_sludge"       />Bovril Sludge</li>
</ul>
<p>Extras:</p>
   <ul>
     <li><input type="checkbox" id="Milk"  name="extras" value="milk" />Milk</li>
     <li><input type="checkbox" id="White" name="extras" value="whiteSugar" />White Sugar</li>
     <li><input type="checkbox" id="Brown" name="extras" value="brownSugar" />Brown Sugar</li>
     <li><input type="checkbox" id="Honey" name="extras" value="honey" />Honey</li>
   </ul>
<span id='drinkResult'></span><span id='hideMe'> with </span><span id='extrasResult'></span>
相关文章：