0

доброго всем времени суток

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

<table>
<tr><td>
<label for="check1" style="display:inline;">
<input id="check1" type="checkbox" style="display:inline;">
<a style="{cursor:pointer}" id="111111111111111111">ссылка1</a>
</label>
</td></tr>
<tr><td>
<label for="check2" style="display:inline;">
<input id="check2" type="checkbox" style="display:inline;">
<a style="{cursor:pointer}" id="222222222222222222">ссылка2</a>
</label>
</td></tr>
</table>
  1. Собственно чекбоксы со ссылками. Нажатием на ссылку - помечается чекбокс. Но нажатием на чекбокс - не срабатывает ссылка. Как нужно сделать, что бы срабатывала? (у меня если ссылка нажимается - включается AJAX)

  2. Везде в стилях прописал display:inline, что бы выровнять чекбокс и ссылку в одну строчку. К сожалению - не удалось этого сделать. Можно конечно запихать все в таблицу - но тогда чекбокс не помечается нажатием на ссылку.

p.s. к 2му. уже не первый день ищу решение этой головоломки, и если кто предложит скрипт меняющий фон за ссылкой - как изврат метод тоже годиться. на этом фоне собственно и будет нарисован чекбокс, пусть и не настоящий. просто решение искать, пробовать штурмовать css, я уже отчаялся 8-(

1 ответ 1

1

Когда вы кликаете на ссылку, то вы попадаете также в область тега label, который и отмечает чекбокс. Можно сделать через цсс: сделать так, чтобы ссылку занимала весь контейнер и находилась как бы над чекбоксом, тогда кликая чекбокс, вы будете кликать область ссылки и будет срабатывать ваш аякс запрос, в свою очередь ссылка находится внутри label он будет отмечать чексбокс. Решение js: при навешивании события клик с аякс запросом на ссылку, что мешает вызвать туже функцию, например на 'change' для инпута.

Пример нормальной верстки формы

<style type="text/css">
    li{
        display:block;
        height:20px;
    }
    input{
        float: left;
        width:15px;
        height:15px;
    }
    a{
        display:block;
        padding-left:20px;
        position:relative;
        z-index:5;
    }
</style>
<ul>
    <li>
        <label>
            <input type="checkbox" />
            <a onclick="console.log('Send Ajax Request')">Click Me</a>
        </label>
    </li>
</ul>

Теперь вы можете кликать в любое место, хоть на чекбокс, хоть на ссылку.

3
  • хмм, даже на css. пример покажите? а то после того, что я даже в строчку чекбокс и ссылку не могу написать, уже впал в ступор
    – sergey
    25 сен 2012 в 11:49
  • 1
    обновил ответ
    – makregistr
    25 сен 2012 в 12:20
  • сработало. только отступ появился с лева, ну я его уже сам уберу. спасибо.
    – sergey
    25 сен 2012 в 12:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.