True/fasle у инпута

327

28 апреля 2017, 17:14

Всем привет, такой вопрос. Есть два инпута. Можно ли как-нибудь сделать так, чтобы не меняя js (попросили не трогать js), а манипулируя только html менять параметр true/false?

html

<p><input type="radio" value="true" name="splitDates">Отдельно</p>
<p><input type="radio" value="false" name="splitDates">Вместе</p>

Javascript

var params = {
    splitDates: false
}

Answer 1

Если понимать ваше задание буквально, то есть не трогать JavaScript код, который написан на странице, а обойтись манипуляциями только HTML, то могу предложить один обходной способ.

Создаем файл нашего будущего скрипта, меняющего значение инпута, для работы на требуемой страницей myscript.js
Пишем необходимый код в созданный файл myscript.js, к примеру такой:
```
document.addEventListener('DOMContentLoaded', function(){
    var ch = document.getElementsByName("splitDates");
    for(var index = 0; index < ch.length; index++){
        if(ch[index].checked){
            ch[index].checked = false;
        }else{
            ch[index].checked = true;
        }
    }
});
```
Про getElementsByName и DOMContentLoaded можно почитать тут:
- Document.getElementsByName()
- HTML DOM getElementsByName() Method
- DOMContentLoaded
- Загрузка документа: DOMContentLoaded, load, beforeunload, unload
Подключаем файл на странице, при этом немного поменяем разметку, добавив
```
<script src="/myscript.js"></script>
```

Что получается в результате? JavaScript-код, написанный ранее - не трогали. Манипулировали на странице только HTML, добавили новый файл. Думаю мысль и приведенный пример достаточно ясны.

Либо, просто, взять блок кода, содержащий инпуты:

<p><input type="radio" value="true" name="splitDates">Отдельно</p>
<p><input type="radio" value="false" name="splitDates">Вместе</p>

заменить руками на следующий:

<p><input type="radio" value="false" name="splitDates">Отдельно</p>
<p><input type="radio" value="true" name="splitDates">Вместе</p>

Просто изменить значение value у тэга input на противоположное.

Answer 2

Вы можете не трогать имеющиеся скрипты. Просто допишите новые которые будут управлять этими значениями. На html такого сделать динамически нельзя.

Answer 3

Так нельзя. Вот вариант на jQuery. Если надо могу на чистом JS дописать.

var params = { 
    splitDates: false, 
    joinDates: true 
} 
 
$("input[type=radio]").click(function(){ 
  $("input[type=radio]").each(function(){ 
 $("input[type=radio]").val(params.splitDates); 
  }); 
  $(this).val(params.joinDates); 
  $("#output").val($(this).parent("p").text() + " = " + $(this).val() + " ; " + $("input[type=radio]").not($(this)).parent().text() + " = " + $("input[type=radio]").not($(this)).val()); 
});

input[type=text] {width: 300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<p><input type="radio" value="true" name="splitDates">Отдельно</p> 
<p><input type="radio" value="false" name="splitDates">Вместе</p> 
 
<input type="text" id="output" contenteditable="false" value=""/>