html конвертировать список переключателей в выпадающее меню

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.

Во-вторых, атрибут id вашего <fieldset> должен быть уникальным (см. this link). Это означает, что вы не можете повторно использовать UserChoice как идентификатор для всех <fieldset> s и < выберите > элемент. Кстати, вы должны действительно look up the HTML syntax, так как есть несколько ошибок, которые ваш браузер молча исправляет.

Давайте sanctonize ваш 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.

Теперь вы можете использовать новый идентификатор, чтобы проверить, какой пользовательский ввод вы хотите использовать. 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 
    } 
} 

Edit:

Очень простой пример. Флажок не очень полезен, и ничего не происходит, когда вы снимаете его самостоятельно.

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>