Как установить значение атрибута html по javascript?

Question

Рассмотрим код:

<input type="1 == 1 ? 'radio' : 'checkbox'" value="myValue"/> 

Но это делает в качестве ввода текста. Кажется, что javascript не устанавливает значение type.

Как установить значение атрибута html на javascript?

Answer 1

Javascript engine не интерпретирует случайные атрибуты HTML как исходный код. Конечно, вы не можете сделать это, как вы пытаетесь сделать. Рассмотрим что-то вроде этого:

<input type="text" value="myValue"/> 
 
<script> 
 
    var input = document.querySelector('input'); 
 
    input.type = 1 == 1 ? 'radio' : 'checkbox' 
 
</script>

Answer 2

Быстрый, но менее элегантно, решение было бы изменить <input> тег в

<input id="inputFoo" value="myValue"/> 

, а затем положить сразу после него пара <script> теги с кодом изменения типа.

<script> 
    if(1 == 1) { 
     document.getElementById("inputFoo").type = "radio"; 
    } else { 
     document.getElementById("inputFoo").type = "checkbox"; 
    } 
</script> 

Или, может быть, скорее:

<script> 
    document.getElementById("inputFoo").type = (1 == 1 ? 'radio' : 'checkbox') 
</script> 

Answer 3

HTML тип ввода текста по умолчанию тип, который устанавливается. HTML не может выполнять условные проверки, то есть причина назначения типа по умолчанию для ввода.

можно достичь, добавив тип атрибута несколько способов с помощью JavaScript, вот несколько способов

<input id="inputTag" value="myValue" /> 
<script> 
    var input = document.getElementById('inputTag'); 
    input.type = 1 == 1 ? 'radio' : 'checkbox' 
</script> 

или использовать контейнер DIV для вставки ввода HTML внутри как этот

<div id="container"></div> 
<script> 
    var div = document.getElementById('container'); 
    div.innerHTML = 1 == 1 ? '<input type="radio" value="myValue" />' : '<input type="checkbox" value="myValue" />' 
</script> 

Если вы используете рендеринг на стороне сервера как jsp, вы можете выполнить условную проверку на стороне сервера и отобразить соответствующий HTML без использования javascript.