Расширение интерактивной области вокруг флажка с помощью jQuery

Question

Я создаю список задач, который использует стандартные поставляемые браузером флажки.Но ИМХО области флажков слишком малы и их трудно щелкать, особенно если вы делаете полу-мощное нажатие нескольких флажков в пользовательском стиле (для пользователей, которые не знают сочетаний клавиш, но хотят много архивировать, удалять и т.д.все сразу).

Есть ли способ сделать область вокруг флажка кликабельной, скажем, дополнительные 5px отступа вокруг него?Я использую jQuery для своего основного кода на стороне клиента, хотя я не против использования простого старого JS, если это имеет смысл.

О, и я на самом деле не ищу плагин.Здесь что-то легкое в порядке.

Заранее спасибо!

Answer 1

Это старый пост, но я просто попытался сделать то же самое, и заполнение / определение размера не влияло на область «попадания». Я использовал jQuery для контейнера, который содержит флажок (в данном случае это тд, поскольку у меня есть их сетка, но divs должен работать):

HTML

<td class="expandCheck">
  <input type="checkbox" name="cfg[][]">
</td>

JS

$(".expandCheck").on('click', function (e) {
    cb = $(e.target).children(":checkbox");
    cb.attr("checked", !cb.attr("checked"));
});

Answer 2

При создании кликабельных ярлыков с изображениями, которые работают в IE8, я стилизовал поле и отступ ярлыка, чтобы покрыть область вокруг флажка, который я хотел, чтобы он был кликабельным.Эффект - это одна большая область, по которой можно кликать, покрывающая метку, флажок и несколько лишних пробелов.

label {
    margin-left: -23px;
    padding-left: 28px;
}​

Поля перемещают его влево, а отступ добавляет текст метки туда, где он должен быть.

jsfiddle этого метода: http://jsfiddle.net/wydKV/

Answer 3

Можете ли вы использовать метку, связанную с флажком? Затем, щелкнув сам ярлык, вы отметите / снимите флажок.

Answer 4

Работает в Chrome с 2016 года:

<style>
.cb{
    position: relative;
    margin:0;
}
.cb:before {
    content:'';
    position: absolute;
    top:-10px;
    bottom:-10px;
    left:-10px;
    right:-10px;
}
</style>

<input type="checkbox" class="cb" />

Answer 5

Это лучшее решение, я использовал его и отлично работает: нажмите здесь http://schoberg.net/2008/10/making-better-forms-clickable-text-for-radio-button-and-checkbox-fields/

или просто используйте этот HTML-код для переключателей или флажков:

ПРОВЕРКА:

<label for="RememberMe">
<input type="checkbox" name="RememberMe" id="RememberMe" value="yes" />
Remember me on this computer.
</label>

РАДИО КНОПКИ:

<label for="goodIdea">
<input type="radio" name="idea" id="goodIdea" value="good" />
Good Idea
</label>
<br />
<label for="badIdea">
<input type="radio" name="idea" id="badIdea" value="bad" />
Bad Idea
</label>

Answer 6

Вы можете столкнуться с кросс-браузерными проблемами, если попытаетесь решить эту проблему с помощью CSS, по причинам, объясненным здесь .Тем не менее, вам на самом деле не нужно использовать javascript.

Ответ Алина, заключающийся в том, чтобы пометить флажок меткой, является лучшим подходом.Это действительный HTML , и вы также можете опустить фактический текст метки, если вы используете столбец таблицы для представления выбранной строки, например.

Пример работы JSFiddle.

<style>
  td label {
    display: table-cell;
    vertical-align: middle;
    border: solid black 1px;
    width: 40px;
    height: 40px;
    text-align: center;
  } 
</style>

<table>
  <tr>
    <td>
      <label for="item1">
          <input type="checkbox" id="item1" name="item[]" value="item2" />
      </label>
    </td>
  </tr>
</table>

Answer 7

Я склонен согласиться с Карлом Гохери - для таких вещей метки являются опцией по умолчанию в формах, которые будут использоваться ... не только для визуальных целей, но и с точки зрения доступности - хорошо разработанная форма должна содержатьfieldset, условные обозначения и метки для поддержки стандартов WAI