Переход при нажатии на checkbox


Xubart
2060

Помогите, пожалуйста, с чекбоксами.

Есть задача при нажатии на чекбокс переходить на разные страницы.

Есть решение через onclick=»location.href , но оно грубовато 🙁

Дело в том, что все юрл, на которые требуется совершить переход, отличаются лишь окончанием.

<input type=»checkbox» value = «slon»> слон
<input type=»checkbox» value = «belka»> белка
<input type=»checkbox» value = «belka/alleana»> белка породы «Аллеана»

и переход нужно, соответственно совершить при нажатии на

www.site.ru/animals/slon.htm
www.site.ru/animals/belka.htm
www.site.ru/animals/belka/alleana.htm

соответственно

Помогите найти решение.

Спасибо!


dmitcat

Тогда jquery в помощь…

<input class=»url_go» type=»checkbox» value = «slon»> слон

<input class=»url_go» type=»checkbox» value = «belka»> белка

<input class=»url_go» type=»checkbox» value = «belka/alleana»> белка породы «Аллеана»

<script>

$(document).ready(function(){

$(«.url_go»).on(«click», function(){

var url_part=$(this).val();

document.location.href=»www.site.ru/animals/»+url_part+».htm»;

});

});

</script>


Xubart

Не переходит:(


hrach

window.location.href


ArbNet


по мне тут лучше использовать radio<br>
<input name=animals1 type=radio onclick="location.href="http://www.site.ru/animals/slon.htm""> слон
<input name=animals1 type=radio onclick="location.href="http://www.site.ru/animals/belka.htm""> белка
<input name=animals1 type=radio onclick="location.href="http://www.site.ru/animals/belka/alleana.htm""> белка породы "Аллеана"
<br><br><hr>если такой вариант не нравится то<br>
<script>
function Go(lnk){
location.href="http://www.site.ru/animals/"+lnk+'.htm';
}
</script>
<input name=animals2 type=radio onchange="Go('slon')"> слон
<input name=animals2 type=radio onchange="Go('belka')"> белка
<input name=animals2 type=radio onchange="Go('belka/alleana')"> белка породы "Аллеана"
<br><br><hr>или<br>
<script>
function Send(lnk){
var form=document.getElementById('form-animals');
form.action='http://www.site.ru/animals/'+lnk+'.htm';
form.submit();
}
</script>
<form id=form-animals method=post>
<input type=radio onchange="Send('slon')"> слон
<input type=radio onchange="Send('belka')"> белка
<input type=radio onchange="Send('belka/alleana')"> белка породы "Аллеана"
</form>


Sly32

ArbNet, Меня бы в компании, где можно филонить за такой код бы просто убили! Что за хардкод???

ArbNet:
<input name=animals2 type=radio onchange=»Go(‘slon’)»> слон


Samail

Xubart:
Есть задача при нажатии на чекбокс переходить на разные страницы.

$('input[type="checkbox"]').change(function(){

window.location.href="http://www.site.ru/animals/"+$(this).val()+'.htm';
});


silicoid

ArbNet, старайтесь так никогда не делать иначе потом задолбаетесь что-то добавлять или убирать в случае необходимости.

самый оптимальный результат, это повесить обработчик с учетом дерева

$('body form').on('change', 'input[name="animals2"]', function(){ /*code here*/ });

такая конструкция позволяет перехватывать даже динамически-создаваемые элементы

а дальше параметры задавать или через value или на худой конец через data-аттрибут.

———- Добавлено 05.02.2020 в 14:48 ———-

зы.

и еще… не надо говнокода. убирайте значения аттрибутов в кавычки

возьмите за правило писать

<input name="animals2" type="radio" data-value="3">

а не

<input name=animals2 type=radio data-value=3>

иначе однажы, когда нужно будет добавить какой-нибудь текст с пробелом в аттрибут, вы огребете немало проблем


ArbNet

Sly32:
Меня бы в компании, где можно филонить за такой код бы просто убили! Что за хардкод???

Я просто напросто показал как можно сделать без джквери 🙂 что действительно хардкор..

Предложите ТС свой вариант не хардкора 🙂 трындите только. Я б такого как вы вообще на работу не взял, сочувствую вашему работодателю.

silicoid:
иначе однажды, когда нужно будет добавить какой-нибудь текст с пробелом в атрибут, вы огребете немало проблем

Вы думаете я не знаю о пробелах в атрибутах? Когда они присутствуют или код генерируется, кавычки ставятся. А когда указывается значение без пробела и оно статично, тогда они не обязательны. Это не говно код, это логика программирования. Не учите людей элементарным вещам, не будьте снобом 🙂


Xubart

Всем спасибо!

Получилось!


Sitealert

Xubart:
Есть задача при нажатии на чекбокс переходить на разные страницы.

Чекбокс не для этого служит.

Xubart:
Есть решение через onclick

Вот это было бы к месту. Или просто по ссылке. ☝

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *