你的饮料

Question

我创建了一个热饮计划，您可以使用单选按钮选择您想要的饮料类型，然后使用复选框选择饮料，即糖，牛奶，蜂蜜。如何使用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>

你的饮料

你的饮料在这里等待：

您的热饮是：

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

刚开始用JavaScript学习理论，但仍然掌握它的实际方面..

Answer 1

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

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.g byId('drinkResult').innerHTML = radioList[i].getAttribute('dispText');

这样做意味着您将显示文本“白糖”，而不是像当前那样显示“白色”。

3. 由于您一次只能选择一个组中的1个单选按钮，因此您无需在按下一个按钮时迭代它们的集合。您只需将处理程序附加到对象，即可处理click事件。由于处理程序附加到事实上，每个无线电元素的一部分 - 该函数可以使用关键字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>

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

你的饮料

1 个答案: