Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменить цвет текста активной radio button (https://javascript.ru/forum/misc/27536-izmenit-cvet-teksta-aktivnojj-radio-button.html)

xlebus 16.04.2012 13:59

Изменить цвет текста активной radio button
 
Здравствуйте,
сделал форму для выбора работ с помощью Drupal + Views (AJAX) + Better Exposed Filter (block) + Views hack (Autosubmit), но теперь никак не выходит применить стиль color к тэгу label, для помеченой кнопки. Провожу пример кода блока:

<div class="block block-views" id="block-views--exp-design-tapyba">
  <div class="content">
    <form action="/decor/painting"  accept-charset="UTF-8" method="get" id="views-exposed-form-design"><div>
      <div class="views-exposed-form">
        <div class="views-exposed-widgets clear-block">
          <div class="views-exposed-widget views-widget-filter-term_node_tid_depth">
            <div class="views-widget">
              <div class="form-radios"><div class="bef-select-as-radios">

<div class="form-item" id="edit-term-node-tid-depth-18-wrapper">
  <label class="option" for="edit-term-node-tid-depth-18"><input type="radio" id="edit-term-node-tid-depth-18" name="term_node_tid_depth" value="18"  checked="checked"  class="form-radio" /> Text1</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-20-wrapper">
  <label class="option" for="edit-term-node-tid-depth-20"><input type="radio" id="edit-term-node-tid-depth-20" name="term_node_tid_depth" value="20"   class="form-radio" /> Text2</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-21-wrapper">
  <label class="option" for="edit-term-node-tid-depth-21"><input type="radio" id="edit-term-node-tid-depth-21" name="term_node_tid_depth" value="21"   class="form-radio" /> Text3</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-19-wrapper">
  <label class="option" for="edit-term-node-tid-depth-19"><input type="radio" id="edit-term-node-tid-depth-19" name="term_node_tid_depth" value="19"   class="form-radio" /> Text4</label>
</div>
              </div></div>
			</div>
          </div>
<div class="views-exposed-widget views-submit-button">
  <input type="submit" id="edit-submit-design" value="Apply"  class="form-submit" />
  <input type="hidden" name="vfas" id="edit-vfas" value=""  />
</div>
        </div>
      </div>
    </div></form>
  </div>
</div>


C помощью стилей, никак не получается придать цвет надпиям (label), а изменить шаблон: "<label><input ...></label>" невыходит, так как используются много сторонних модулей, максимум что можно изменить, так это: "<div class='form-item' ...", думаю может прописать JavaScript параметр onClick и обратиться к "DIV#edit-term-node-tid-depth-18-wrapper label", что бы изменить цвет активной кнопки, но я не силён в JavaScript.

Может у вас есть идеи, как это осуществить?

Результат нужен такой:

ksa 16.04.2012 15:12

Цитата:

Сообщение от xlebus
Может у вас есть идеи, как это осуществить?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.on {
	color: green;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.bef-select-as-radios :radio:checked').each(function (){
		$(this).parent().addClass('on');
	});
	$('.bef-select-as-radios label').click(function (){
		$('.bef-select-as-radios label').removeClass('on'),
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<div class="block block-views" id="block-views--exp-design-tapyba">
  <div class="content">
    <form action="/decor/painting"  accept-charset="UTF-8" method="get" id="views-exposed-form-design"><div>
      <div class="views-exposed-form">
        <div class="views-exposed-widgets clear-block">
          <div class="views-exposed-widget views-widget-filter-term_node_tid_depth">
            <div class="views-widget">
              <div class="form-radios"><div class="bef-select-as-radios">

<div class="form-item" id="edit-term-node-tid-depth-18-wrapper">
  <label class="option" for="edit-term-node-tid-depth-18"><input type="radio" id="edit-term-node-tid-depth-18" name="term_node_tid_depth" value="18"  checked="checked"  class="form-radio" /> Text1</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-20-wrapper">
  <label class="option" for="edit-term-node-tid-depth-20"><input type="radio" id="edit-term-node-tid-depth-20" name="term_node_tid_depth" value="20"   class="form-radio" /> Text2</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-21-wrapper">
  <label class="option" for="edit-term-node-tid-depth-21"><input type="radio" id="edit-term-node-tid-depth-21" name="term_node_tid_depth" value="21"   class="form-radio" /> Text3</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-19-wrapper">
  <label class="option" for="edit-term-node-tid-depth-19"><input type="radio" id="edit-term-node-tid-depth-19" name="term_node_tid_depth" value="19"   class="form-radio" /> Text4</label>
</div>
              </div></div>
			</div>
          </div>
<div class="views-exposed-widget views-submit-button">
  <input type="submit" id="edit-submit-design" value="Apply"  class="form-submit" />
  <input type="hidden" name="vfas" id="edit-vfas" value=""  />
</div>
        </div>
      </div>
    </div></form>
  </div>
</div>
</body>
</html>

xlebus 16.04.2012 17:24

ksa
Спасибо большое! Это как раз то, что мне нужно.


Часовой пояс GMT +3, время: 02:51.