0

Вопрос такой. js позволяет выбрать один из css на выбор пользователя. Переключение происходит кликом по radio input. При первом посещении активен первый стиль - "/css/1.css" (он checked). Скрипт использует cookie и помнит последний выбранный вариант. Как при открытии страницы присваивать checked второму и третьему css, если пользователь их выбирал ранее и лишать checked первый стиль?

<link id="DynCSS" rel="stylesheet" type="text/css" href=""> 
<script type="text/javascript"> 
function setDynCSS(url) { 
if (!arguments.length) { 
url = (url = document.cookie.match(/\bDynCSS=([^;]*)/)) && url[1]; 
if (!url) return ''; 
} 
document.getElementById('DynCSS').href = url; 
var d = new Date(); 
d.setFullYear(d.getFullYear() + 1); 
document.cookie = ['DynCSS=', url, ';expires=', d.toGMTString(), ';path=/;'].join(''); 
return url; 
} 
setDynCSS(); 
</script> 

<input type="radio" name="radio" class="regular-radio" onclick="setDynCSS('/css/1.css')" checked/>
<input type="radio" name="radio" class="regular-radio" onclick="setDynCSS('/css/2.css')"/>
<input type="radio" name="radio" class="regular-radio" onclick="setDynCSS('/css/3.css')"/>

2 ответа 2

0

Мой вариант

<link href="/css/3.css" type="text/css" rel="stylesheet" id="DynCSS">

<input type="radio" onclick="setDynCSS('/css/1.css')" data-url="/css/1.css" class="regular-radio" name="radio" checked="">
<input type="radio" onclick="setDynCSS('/css/2.css')" data-url="/css/2.css" class="regular-radio" name="radio">
<input type="radio" onclick="setDynCSS('/css/3.css')" data-url="/css/3.css" class="regular-radio" name="radio">



<script type="text/javascript">

function setDynCSS(url) {
  if (!arguments.length) {
    url = (url = document.cookie.match(/\bDynCSS=([^;]*)/)) && url[1];
    if (!url) return '';
    var elems = document.getElementsByTagName('input');
    for (var i=0; i < elems.length; i++) {
          if (elems[i].getAttribute('data-url') == url)
            {
            elems[i].checked = true;
            }
        }
  }
  document.getElementById('DynCSS').href = url;
  var d = new Date();
  d.setFullYear(d.getFullYear() + 1);
  document.cookie = ['DynCSS=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
  return url;
}
setDynCSS();

</script>

Некоторых проверок нет. Возможно, стоит избавиться от записи '/css/?.css' в двух места и оставить значение только в data-url, а при вызове функции получать его через this.getAttribute('data-url').

3
  • Спасибо "Некоторых проверок нет." - чем это чревато в данном случае?
    – Acht88
    9 авг 2015 в 14:03
  • Я про перебор элементов input имел в виду. Если у вас на странице есть еще эти элементы, то тут document.getElementsByTagName('input'); следует заменить document на родитель только нужных вам input'ов.
    – Visman
    9 авг 2015 в 14:07
  • Понял, спасибо еще раз
    – Acht88
    9 авг 2015 в 14:18
0

Вот так : document.getElementById("pervijRadio").checked = false; document.getElementById("vtorojRadio").checked = true;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.