Как переключить скрытый переключатель со ссылкой в ​​jQuery 1.9?

Question

Я пробовал искать это, но обычно люди хотят переключать «divs» с помощью переключателя, однако я бы хотел переключить скрытый переключатель со ссылкой.

У меня есть кнопка радио группа, как это:

<label class="radio inline hidden"><input class="radio_buttons" id="orderDirectionASC" name="orderDirection" type="radio" value="1" /> ASC</label> 

<label class="radio inline hidden"><input class="radio_buttons" id="orderDirectionDESC" name="orderDirection" type="radio" value="0" /> DESC</label> 

Таким образом, просто чтобы сделать мою форму похорошела вместо того, чтобы позволить пользователю нажимать на кнопки радио, я хотел бы иметь изображение стрелку вверх или стрелка вниз, которая переключается при нажатии. Что-то вроде этого:

<a href="##" class="directiontoggle"> 
<i class="icon-chevron-up"></i> 
<i class="icon-chevron-down"></i> 
</a> 

Конечно только один из них будет отображаться в то время, так что, когда кнопка радио переключается, так что эти изображения. Поэтому, если радио установлено на 1, оно показывает стрелку вверх и наоборот.

О, а также я должен упомянуть, что я установил переключатель вверх или вниз на основе переменной URL-адреса в pageload в моем коде ColdFusion. Я не знаю, помогает ли это или нет ...

Благодарим за помощь!

Answer 1

Хорошо, я подумал, что понял. Возможно, это не самый элегантный способ сделать это, но он работает. Предложения по улучшению приветствуются :)

1-я нагрузка на страницу Я либо скрываю стрелку вверх, либо вниз, в зависимости от того, какой первоначальный выбор.

<cfif orderDirection eq 1> 
    $('.directiontoggleDOWN').hide(); 
<cfelse> 
    $('.directiontoggleUP').hide(); 
</cfif> 

Тогда у меня есть этот JQuery код:

 $('.directiontoggleUP').on('click', function(e) { 
      e.preventDefault(); 
      $("##orderDirectionDESC").prop("checked", true); 
      $('.directiontoggleUP').hide(); 
      $('.directiontoggleDOWN').show(); 
     }); 
     $('.directiontoggleDOWN').on('click', function(e) { 
      e.preventDefault(); 
      $("##orderDirectionASC").prop("checked", true); 
      $('.directiontoggleDOWN').hide(); 
      $('.directiontoggleUP').show(); 
     }); 

И мой HTML выглядит следующим образом:

   <a href="##" class="directiontoggleUP"> 
        <i class="icon-chevron-up"></i> 
       </a> 
       <a href="##" class="directiontoggleDOWN"> 
        <i class="icon-chevron-down"></i> 
       </a> 

Так да, это работает :)

Answer 2

$('.directiontoggle').on('click', function(e) { 
    e.preventDefault(); 

    var radio = $('#orderDirectionASC'), //radio button to toggle 
     _check = radio.is(':checked'); //is it checked ? 

    $('i', this).toggle(); // toggle both i elements, one should be hidden by CSS 

    radio.prop('checked', !_check); // toggle radio button 
}); 

Answer 3

Возможно, такой пример будет полезен для вас. Он работает с использованием чистого HTML + CSS: http://jsfiddle.net/t6kBQ/5/

Html следит за

<div id="sites"> 
    <input type="radio" name="arrows" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" />ASC</label> 
    <br/> 
    <input type="radio" name="arrows" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" />DESC</label> 
</div> 

CSS выглядит следующим образом:

.input_hidden { 
    position: absolute; 
    left: -9999px; 
} 

.selected { 
    background-color: #ccc; 
} 

#sites label { 
    display: inline-block; 
    cursor: pointer; 
} 


#sites label:hover { 
    background-color: #efefef; 
} 

#sites label img { 
    padding: 3px; 

} 

P.S. Извините за глупые значки :)