Question

我已将第二个字段集中的单选按钮列表转换为下拉菜单。但是，我想传递第一个字段集中的值，该字段集本身是一个单选按钮，或者来自第二个字段集的下拉菜单中的选定值。默认情况下，我会检查第一个字段集中的单选按钮，但是当我从下拉菜单中选择时，它不会取消选中第一个字段集中的无线电。我的目标是只从这些值传递一个值，单选按钮值或下拉列表中的一个选定值。您将在第二个字段集中看到我之前的单选按钮，它们被评论。但它奏效了！那么如何更改代码以按照应有的方式工作：即所选值的任何一个传递：从单选按钮还是下拉列表？如果单选按钮然后禁用下拉列表，反之亦然。

<table>
    <td>
    <fieldset id="field1" >
        <legend>Radio</legend>  
            <label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myradio' checked>Upload</label>

            <div id='uploadFile'>
                    <input type="file" name="file" id="file" />
            </div>


    </fieldset>
    </td>
    <td>
    <fieldset id="field2" > 

    <!--        
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption1' onClick=''>1</label></div>
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption2' onClick=''>2</label></div>
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption3' onClick=''>3</label></div>
                <div><label ><Input type = 'Radio' Name ='mychoice' class='mychoice' value= 'myoption4' onClick=''>4</label></div>
     -->
                <select class="mychoice" class='mychoice'>
                    <option Name ='mychoice' class='mychoice' value="myoption1">1</option>
                    <option Name ='mychoice' class='mychoice' value="myoption2">2</option>
                    <option Name ='mychoice' class='mychoice' value="myoption3">3</option>
                    <option Name ='mychoice' class='mychoice' value="myoption4">4</option>              
                </select>
    </fieldset>
    </td>
</table>

Answer 1

首先，如果要检查是/否值，请不要使用单个单选按钮。请改用复选框。您实际上并不需要这些输入中的任何一个，因为您只需从uploadFile输入中处理事件。

其次，＆lt; fieldset＆gt;的id属性必须是唯一的（请参阅this link）。这意味着你不能将 UserChoice 重用为所有＆lt; fieldset＆gt;和＆lt; select＆gt;的id。元件。顺便说一句，你应该look up the HTML syntax，因为你的浏览器默默地修复了一些错误。

让我们对您的HTML进行整理

<fieldset id="DefaultUserChoice">
<legend>Radio</legend>  
    <label for="mychoice">Upload</label>
    <input type="checkbox" id="CheckboxUserChoice" name ="mychoice" class="mychoice" value="mycheckbox" checked="checked">
    <div id="uploadFile">
            <input type="file" name="file" id="file">
    </div>
</fieldset>
<fieldset id="AnotherUserChoice"> 
        <select class="mychoice" id="SelectUserChoice">
            <option value="myoption1">1</option>
            <option value="myoption2">2</option>
            <option value="myoption3">3</option>
            <option value="myoption4">4</option>                
        </select>
</fieldset>

我假设你使用javascript虽然你的问题遗漏了（抱歉还不能写评论）。如果您不使用它，您应该开始使用它。您想要实现的目标无法单独使用HTML。

您现在可以开始使用新ID来检查您要使用的用户输入。 javascript代码看起来像这样：

// Handle the checkbox unchecking
document.getElementById("SelectUserChoice").onchange = function(event) {
    // Disable the checkbox when the select element changes
}

function validateUserInput() {
    if(document.getElementById("CheckboxUserChoice").checked == true) {
        // Use the checkbox value
    } else {
        // Use the select value
    }
}

修改：

一个非常简单的例子。该复选框不是很有用，当你自己取消选中时没有任何反应。

mySelectedValue.innerText = "mycheckbox"; SelectUserChoice.onchange = function(event) { // Disable the checkbox when the select element changes CheckboxUserChoice.checked = false; mySelectedValue.innerText = event.target.value; } CheckboxUserChoice.onchange = function(event) { mySelectedValue.innerText = event.target.value; }

<body> <fieldset id="DefaultUserChoice"> <legend>Radio</legend> <label for="mychoice">Upload</label> <input type="checkbox" id="CheckboxUserChoice" name="mychoice" class="mychoice" value="mycheckbox" checked="checked"> <div id="uploadFile"> <input type="file" name="file" id="file"> </div> </fieldset> <fieldset id="AnotherUserChoice"> <select class="mychoice" id="SelectUserChoice"> <option value="dontUseMe">-Select a value-</option> <option value="myoption1">1</option> <option value="myoption2">2</option> <option value="myoption3">3</option> <option value="myoption4">4</option> </select> </fieldset> <p>Value to be used: <span id="mySelectedValue">none</span> </p> </body>

html将单选按钮列表转换为下拉列表

1 个答案: