VPF::Красивые radio переключатели - Форум программистов

JavaAlex

Дата 12.3.2010, 12:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 12.3.2010

Репутация: нет
Всего: нет

Здравствуйте, в ЯваСкрипте я не очень шарю...

нужно сделать красивые радио переключатели выбора пола:

когда выбран мужской пол

когда выбран женский

Тут просто при выборе radio меняется фон, но у меня выбираться выбирается, а вот обратно фон не возвращается когда выбираю другой пол, получается как будто они выбраны оба.

Понимаю что нужно что то поправить в Ява скрипте, но что низнаю...:thanks:

HTML

CSS:

Код


.RadioMan{
display: none;
}
    .RadioWoman{
display: none;
}
    .man{
background: url("uncheckman.png") no-repeat center;
font-family: tahoma, verdana, "sans-serif";
margin-left: 50px;
width: 50px;
height: 65px;
display: block; 
float: left;
cursor: pointer;
}
    .woman{
background: url("uncheckwoman.png") no-repeat center;
font-family: tahoma, verdana, "sans-serif";
margin-left: 50px;
width: 50px;
height: 65px;
display: block; 
float: left;
cursor: pointer;
}
    .RadioLabelClass:hover{
text-decoration: underline;
cursor: pointer;
}
    .RadioSelectedMan{
background: url("checkman.png") no-repeat center;
}
    .RadioSelectedWoman{
background: url("checkwoman.png") no-repeat center;
}

Код


$(document).ready(function(){
$(".RadioMan").change(function(){
if($(this).is(":checked")){
$(".RadioSelectedMan:not(:checked)").removeClass("RadioSelectedMan");
$(this).next("label").addClass("RadioSelectedMan");
}
});
$(".RadioWoman").change(function(){
if($(this).is(":checked")){
$(".RadioSelectedWoman:not(:checked)").removeClass("RadioSelectedWoman");
$(this).next("label").addClass("RadioSelectedWoman");
}
}); 
});

bars80080

Дата 12.3.2010, 15:27 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

а картинки что ли в лэйблах?

Код


<table border='01'>
    <tr>
        <td>
            <input id="Radio1" type="radio" class="RadioMan" onclick="qw(0);" name="sex" >
            <label id="Label1" for="Radio1" class="man"></label>
        </td>
        <td>
            <input id="Radio2" type="radio" class="RadioWoman" onclick="qw(1);" name="sex"/>
            <label id="Label2" for="Radio2" class="woman"></label> 
        </td>
    </tr>
</table>

Код


function qw(z) {
    if(z) {
        document.getElementById('Label1').className = 'man';
        document.getElementById('Label2').className = 'RadioSelectedWoman';
    } else {
        document.getElementById('Label1').className = 'RadioSelectedMan';
        document.getElementById('Label1').className = 'woman';
    }
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »