X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Переключение цвета текста checkboxом
Elusive28
Elusive28
Topic Starter сообщение 3.1.2013, 16:23; Ответить: Elusive28
Сообщение #1


Ситуация такая:
Сделал чекбоксы картинками, текст который привязан к ним не в метках, потому что не получалось поставить текст куда надо, в общем нужно чтобы когда клацаешь по тексту/чекбоксу(становится checked) текст рядом с этим чекбоксом менял цвет, когда клацаешь снова(становится unchecked) текст возвращал свой первоначальный цвет.
Помогите пожалуйста.
Вот код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Главная страница</title>
<link rel="Stylesheet" href="question.css"/>
<script type="text/javascript">

function changeCheck(el)
/*
функция смены вида и значения чекбокса
el - span контейнер дял обычного чекбокса
input - чекбокс
*/
{

var el = el,
input = el.getElementsByTagName("input")[0];

if(input.checked)
{
el.style.backgroundPosition="0 0";
input.checked=false;
}
else
{
el.style.backgroundPosition="0 -17px";
input.checked=true;
}
return true;
}
function startChangeCheck(el)
/*
если значение установлено в on, меняем вид чекбокса на включенный
*/
{
var el = el,
input = el.getElementsByTagName("input")[0];
if(input.checked)
{
el.style.backgroundPosition="0 -17px";
}
return true;
}

function startCheck()
{
/*
при загрузке страницы заменяем проверяем значение чекбокса в указанном контенере.
если чекбоксов несколько, нужно будет несколько раз вызвать функциую с нужными id
*/
startChangeCheck(document.getElementById("box1"));
}

window.onload=startCheck;

</script>
</head>
<style type="text/css">
.niceCheck {
width: 16px;
height: 16px;
display: inline-block;
cursor: pointer;
background:url(images/titulradiobuttons.png);
}
.niceCheck input {
display: none;
}
</style>

<body>
<div class="wrapper">

<div id="ost2">
<table border="0" width="100%"
cellspacing="0" cellpadding="0" style="font-size:15px; font:'Segoe UI'">
<tr>
<td style="color:#b01825;" width="100%">
<input id="Protext" name="Protext" type="text" /><br />

<span class="niceCheck" onclick="changeCheck(this)" id="box1"><input type="checkbox" name="ch1" /><h5 id="ua">.ua</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box2"><input type="checkbox" name="ch1" /><h5 id="comua">.com.ua</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box3"><input type="checkbox" name="ch1" /><h5 id="netua">.net.ua</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box4"><input type="checkbox" name="ch1" /><h5 id="orgua">.org.ua</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box5"><input type="checkbox" name="ch1" /><h5 id="kievua">.kiev.ua</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box6"><input type="checkbox" name="ch1" /><h5 id="com">.com</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box7"><input type="checkbox" name="ch1" /><h5 id="net">.net</h5></span>

<span class="niceCheck" onclick="changeCheck(this)" id="box8"><input type="checkbox" name="ch1" /><h5 id="inua">.in.ua</h5></span>

</td>
</tr>
</table>
</div>


[CSS]@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}
html {
background:#009;
font-family:"Segoe UI";
overflow-x: hidden;
}
body {
margin:0;
padding:0;
width: 100%;
height: 100%;
}
.wrapper {
width: 1017px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
#ost2{
border:1px solid #FFF;
border-right:1px solid white;
border-width:100%;
width:964px;
margin-top:262px;
margin-left:22px;
height:107px;}
#Protext{
width:746px; margin-top:37px; margin-left:20px;
height:23px; border-bottom:none; border-left:#F0F0F0;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#Protext { width:743px; margin-left:19px; height:23px; }
}
noindex:-o-prefocus, #Protext{border-top:#000 solid 1px;}
h5{font:"Segoe UI";font-size:15px;font-weight:normal;}
#box1{
margin:16px 0 0 31px;}
#ua{
margin-left:37px;
margin-top:-3px;
color:#af1b33;}
@-moz-document url-prefix() { #ua { margin-top:-4px;} }

#comua{
margin-left:20px;
margin-top:-3px;}
@-moz-document url-prefix() { #comua { margin-top:-4px; } }
#box2{
margin-left:74px; margin-top:16px; position:absolute; }

#netua{
margin-left:20px;
margin-top:-3px;}
@-moz-document url-prefix() { #netua { margin-top:-4px; } }
#box3{
margin-left:179px; margin-top:16px;position:absolute;}

#orgua{
margin-left:20px;
margin-top:-3px;
color:#af1b33;}
@-moz-document url-prefix() { #orgua { margin-top:-4px; } }
#box4{
margin-left:276px; margin-top:16px;position:absolute; }

#kievua{
margin-left:19px;
margin-top:-3px;
color:#af1b33;}
@-moz-document url-prefix() { #kievua { margin-top:-4px; } }
#box5{
margin-left:372px; margin-top:16px;position:absolute; }

#com{
margin-left:21px;
margin-top:-3px;}
@-moz-document url-prefix() { #com { margin-top:-4px; } }
#box6{
margin-left:475px; margin-top:16px;position:absolute;}

#net{
margin-left:23px;
margin-top:-3px;}
@-moz-document url-prefix() { #net { margin-top:-4px; } }
#box7{
margin-left:559px; margin-top:16px;position:absolute;}

#inua{
margin-left:24px;
margin-top:-3px;}
@-moz-document url-prefix() { #inua { margin-top:-4px; } }
#box8{
margin-left:640px; margin-top:16px;position:absolute;}
[/CSS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
сообщение 3.1.2013, 22:18; Ответить: Zippovich
Сообщение #2


label тег - не оно?
вообще в инете куча готовых скриптов подмены checkbox
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Elusive28
Elusive28
Topic Starter сообщение 4.1.2013, 1:31; Ответить: Elusive28
Сообщение #3


(Zippovich @ 4.1.2013, 01:18) *
label тег - не оно?
вообще в инете куча готовых скриптов подмены checkbox


ты вообще читал мое сообщение?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Elusive28
Elusive28
Topic Starter сообщение 4.1.2013, 1:35; Ответить: Elusive28
Сообщение #4


попробую перефразировать:
у меня вместо лэйбла идет в заголовке h5 текст, который должен менять цвет при нажатии-можно по его айди ведь менять цвет как-то

  1. <span>
  2. <input type="checkbox"/>
  3. <h5>TEXT</h5>
  4. </span>


с чекбоксом все в порядке-картинками заделал, в коде видно
просто лэйблом управлять не смог-надо чтоб текст возле чекбокса был по центру, а метка ниже центра от уровня чекбокса
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zippovich
Zippovich
сообщение 4.1.2013, 2:35; Ответить: Zippovich
Сообщение #5


Я тебе на jquery напишу - сам переводи в нативный, если хочешь

$(function() {
$('.niceCheck input').change(function() {
if ($(this).is(':checked')) {
$(this).next('h5').css('background','red');
}
else {
$(this).next('h5').css('background','#fff');
}
});
});
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Elusive28
Elusive28
Topic Starter сообщение 4.1.2013, 14:19; Ответить: Elusive28
Сообщение #6


решил своим способом, куда проще)
<script type="text/javascript">

function changeCheck(el)
{
var el = el,
input = el.getElementsByTagName("input")[0];

if(input.checked)
{
el.style.backgroundPosition="0 0";
input.checked=false;
el.style.color = "#72777F";
}
else
{
el.style.backgroundPosition="0 -17px";
input.checked=true;
el.style.color = "#af1b33";
}
return true;
}
function startChangeCheck(el)
{
var el = el,
input = el.getElementsByTagName("input")[0];
if(input.checked)
{
el.style.backgroundPosition="0 -17px";
}
return true;
}



function startCheck()
{
startChangeCheck(document.getElementById("box1"));
}
window.onload=startCheck;
</script>

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Перевод текста в речь нейросетями - сервис Zvukogram
 13 Zvukogram 7192 19.2.2024, 18:16
автор: freon_mr777
Открытая тема (нет новых ответов) 📌 Рандомизация видео/аудио/фото/текста с минимальным участием - 𝓓𝓮𝓵𝓽𝓪𝓣𝓸𝓸𝓵𝓼
Мы предлагаем комплексное решение для рандомизации всех видов офера
 2 leviathan 1377 29.1.2024, 21:29
автор: leviathan
Открытая тема (нет новых ответов) Нужен перевод текста с RU на UZ
 0 REGNET 765 22.2.2023, 15:17
автор: REGNET
Открытая тема (нет новых ответов) Наполнение сайта Автотематики (написание текста с размещением)
Ищу человека для длительного сотрудничества
 2 NYLesha 1832 1.8.2022, 23:22
автор: NYLesha
Открытая тема (нет новых ответов) Рерайт на постоянку (2-3 текста в неделю)
Авто тематика
 2 k62 1799 4.6.2021, 21:20
автор: mark2013


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 12:38

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet