如何將單選按鈕和復選框一起添加輸入選擇以在JavaScript中形成輸出

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）。

例如<li><input type="checkbox" id="White" name="extras" value="whiteSugar" dispText='White Sugar'/>White Sugar</li>

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

例如byId('drinkResult').innerHTML = radioList[i].getAttribute('dispText') ;

這樣做將意味着您顯示文本“ White Sugar”，而不是當前顯示的“ White”。

3.由於一次只能選擇一個組中的一個單選按鈕，因此在按下一個按鈕時無需遍歷它們的集合。 您只需將處理程序附加到對象，即可處理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>