HTML+CSS+JavaScript

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

Хочу что бы они были как чекбоксы, но выглядили ссылками. Мне нужно передать значения AJAX обработчку...
<ul>
<li><a href="#">300—1000</a></li>
<li><a href="#">1000—2000</a></li>
<li><a href="#">2000—5000</a></li>
<li><a href="#">5000—10000</a></li>
<li><a href="#">10000—&#8734;</a></li>
</ul>

Заранее очень признателен!!!

>Хочу что бы они были как чекбоксы, но выглядили ссылками

Это как, были подчеркнуты, синенькими, и меняли стиль при наведении?

>Хочу что бы они были как чекбоксы, но выглядили ссылками

=================================================
приводя при этом как пример список.
"рыыыыбка! сделай нас большими! огромными! чтобы плавали ... и не тонули" (C)

Я бы скорее сделал чекбоксы, которые заставил бы выглядеть ссылками. Это заморочка та еще, но решаемо. Вижу подобные пользовательские чекбоксы иногда. никогда не интересовался как их делают, но уверен, что даже плагины есть.

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

Да что же это я!? Нужно просто сами чекбоксы запихать в скрытый див. А вынести просто их label. Для лейблов можно задать стиль как для ссылок. При желании - дописать обработчик, который будет изменять их стили при клике, чтобы они соответствовали состоянию чекбокса.

Не надо их никуда запихивать, а в элемент LI и вставлять, а по щелчку его отмечать дитя.

Зачем дитя? Есть очень крутой элемент label, который присовокупляется ко всяческим чекбоксам.

<input type="checkbox" id="box"/> <label for="box">Поставить чекбокс</label>

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

Можно конечно, выбросить ссылки и вместо них метки. Вот только как такой кухней пользоваться, если пользователь не может контролировать свой выбор.

Поэтому я и написал, что нужно добавлять обработчик, который будет по клику на метку добавлять к ней, скажем, класс. Скажем, чекбокс выбран - метка жирная. Не выбран - обычная.

И половина страницы с объяснением, что "если..." :) Уж если такое делать, то нужно выбранные, например, перемещать вверх, а с которых снят выбор, вниз, изменяя и цвет, к примеру. Да и вообще, чем плох чекбокс, который как раз удобен для выбора и отображения состояния, не понимаю.

По-моему, все просто и логично. Для своего оформления чекбоксов - в самый раз.

Пользователя жалеть надо, он должен понимать а не предполагать, что следует за его щелчком. ;-)

А пользователя никто обманывтаь и не собирается, там просто весь сайт на AJAX. И выборку удобнее делать чекбоксами, но они портят весь вид, вот поэтому решил их убрать с глаз долой))

Кто вам сказал, что они портят вид? Собственно элементы списка вы можете снабдить фоновым изображением, которое будет меняться при щелчке, на котором собственно можете нарисовать любой вид чекбокса, который по вашему не портит вида.

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

Как вы можете судить о том, чего даже не видели? очень страно...

Я сужу по тому, что уже предлагают вам, что в этом странного. Я ведь тоже пользователь, и от ссылки привык ожидать новое содержание, а не эффекта какого либо, как и при фиксации выбора наблюдать ее. Оформление ссылок, чекбоксов, как впрочем и других элементов, это уже второй вопрос, но использование их не по назначению, означает неоднозначность.

Я вот прекрасно понимаю твои суждения и прочее. Но здесь и правда не место и не время рассуждать о том, как должно быть. Потому что вдруг и правда в конкретном случае так быть не должно? Мы же и правда не видели что у него там.

Кагбе была задача, задача решена. Остальное - на совести автора. Смысл его переубеждать?

Ну и наконец, можно ведь сделать css оформление такое, что будет тоже чекбокс, только нарисованный:) background-image в помощь.

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

Я вообще-то не рассуждаю, а ответил на реплику автора, и ответил как обычный пользователь, как я это привык видеть и ожидать, и почему мне как пользователю такое кажется неествественным.
Рассуждать вы начали. ;-)

Ну просто этот ответ уже был:) Мне показалось, что вы хотите убедить в чем-то автора. Я хотел предотвратить холивар из-за простого недопонимания:)

Да ну, зачем переубеждать, я что против что-ли. :)

Ну и хорошо:)

Просто замечательно )
Правда стоит отметить следующее:
1. Чекбокс, это по сути логический триггер, изменяющий свое состояние на противоположное при каждом щелчке.
2. Если при выборе каждого элемента списка идет запрос на сервер информирующий состояние выбора, а чекбокс его хранящий хотят скрыть, то из этого следует:
а) чекбокс вообще не нужен в данном случае,
б) функцию триггера возложить на поле в таблице базы.
При первичной загрузке, когда пользователь еще не делал никакого выбора, состояния для некоего набора будут равны 0, это будет "точкой отсчета". Достаточно щелкнуть по элементу и передать его идентификатор на сервер, чтобы изменить состоние:
SET var=var^1 WHERE...
Следующий щелчок по элементу изменит состояние в базе на противоположное. А щелкать можно по чему угодно, а не только по элементу А, как собственно и "раскрашивать" элементы по наведению мышки. ;-)

ООчень много написано, спать хочется не смогу осилить и прочесть... Скажу одно, спасибо всем Огромное!!! все работает, и работает прекрасно, все прям как и хотелось! Спасибо!

Не так уж и много чтобы понять, что отсылать значение чекбокса как такового совсем не нужно, он вообще не нужен. Если сервер получит ID некой записи, то он знает, что значение поля выбора этой записи нужно проинвертировать, и делает это логической опирацией XOR.

<script> var base = [0,0,0]; //имитатор полей в базе function selectItem(e) {   base[e.value] ^= 1; //инвертирование в базе по id запроса   e.innerHTML = base[e.value] ? "\u221A "+e.innerHTML : e.innerHTML.replace("\u221A ","");     document.getElementById("inf").innerHTML = 'Base where ID '+e.value+' = '+base[e.value]; } </script> <ul style="list-style: none;"> <li value=0 onclick=selectItem(this)>as 1</li> <li value=1 onclick=selectItem(this)>as 2</li> <li value=2 onclick=selectItem(this)>as 3</li> </ul> <div id=inf></div>

---

Ваш пример глючит, а значит это не выход.

Скажите как воспроизвести и будет вам решение. Это же черновик всего-лишь.

Дайте-ка отгадаю. Вы просто нажали "показать чекбоксы" и нажимали прямо на них, а не на надписи, да? Если так, то это не баг а несоответствие теста условиям задачи. Если бы я не сделал ссылки "показать чекбоксы", вы бы не смогли так сделать и все бы работало. Я сделал ее исключительно для наглядности.

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

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

Причина в том, что нет обработчика двойного клика:)
Добавил обработчик - не глючит.

Отличное решение, спасибо огромное.

Спасибо Всем кто принял участие в обсуждении темы. Попозже все внимательно посомтрю и попробую. Еще раз спасибо Всем!

<style> #myUL li a {color: black; text-decoration: none} </style> <script> function mFunc (x) { if (self.CRRNT)    {    CRRNT.style.color = 'black'; CRRNT.style.textDecoration = 'none';    if (x == CRRNT) {CRRNT = null; return false}    } CRRNT = x; x.style.color = 'red'; x.style.textDecoration = 'underline'; //запускаете вызов AJAX, используя x.innerHTML для идентификации запроса return false; } </script> <ul id="myUL"> <li><a href="#" onclick="return mFunc (this)">300—1000</a></li> <li><a href="#" onclick="return mFunc (this)">1000—2000</a></li> <li><a href="#" onclick="return mFunc (this)">2000—5000</a></li> <li><a href="#" onclick="return mFunc (this)">5000—10000</a></li> <li><a href="#" onclick="return mFunc (this)">10000—&#8734;</a></li> </ul>

Хотя это, если честно - аналог радиокнопок (с AJAX-вызовом "на лету"), а не чекбоксов.

Для эмулирования чекбоксов (где возможен множественный выбор и отмена любых ранее отмеченных) не хватает от вас исходных данных - непонятно, когда посылать AJAX-запрос, при каждом изменении, что ли? Это глупо... Если ПОТОМ, по окончании всех манипуляций, то тогда Вам следовало кнопку "Отправить" в исходном коде предусмотреть.

Если предложенный вариант не подойдёт и нужен с последующей отправкой (по какой-то кнопке), то свистните, если сами не справитесь... напишу.

Добрый вечер уважаемые формучане, решил не создавать новую тему, подскажите пожалуйста, как заменить checkbox на radio? И что бы класс active снимался с неактивных radio

Зарабнее очень признателен!

Вы мой пример смотрели? Там есть весь необходимый код для того, чтобы присваивать какой-то класс активным элементам и снимать его с неактивных.