用jQuery扩展复选框周围的可点击区域

我在设计一个使用标准浏览器提供的复选框的任务列表。但恕我直言，复选框区域太小，难以点击，特别是如果你正在做半功率用户风格点击多个复选框（对于不知道键盘快捷键但想做大量归档，删除等的用户。一次全部）。用jQuery扩展复选框周围的可点击区域

有没有什么办法让复选框周围的区域可以点击，比如说在它周围填充5px？我使用jQuery作为我的主要客户端代码，但我并不反对使用普通的旧JS，如果它更合理。

哦，我并不是真的在寻找一个插件。这里有一些轻量级的东西。

提前欢呼！

来源

2010-11-08 Josh Smith

您可以使用与该复选框关联的标签吗？然后单击标签本身将检查/取消选中该框。

来源

2010-11-08 10:17:00

你介意分享一个例子吗？仍然足以让jQuery保证它。 – 2010-11-08 10:30:19

@Josh：标签是一个HTML标签，与输入结合使用。在这里有一个squizz：http://www.w3schools.com/tags/tag_label.asp – 2010-11-08 10:33:55

是的 - 正如Alastair所说，它只是一个HTML标签。只要确保将“for”属性设置为复选框的ID即可。不知道你使用的是什么服务器站点语言，但是如果你使用的是.net，一定要使用.net标签而不是标准的html标签，因为.net会更改控件的标识，并且可能会混淆你的复选框/标签关系。 – 2010-11-08 10:41:16

我倾向于同意Karl Gohery - 对于这种事情，标签是要使用的表单中的默认选项......不仅用于视觉目的，还包括可访问性视角 - 设计良好的表单应该包含支持WAI标准的字段集，图例和标签

来源

2010-11-08 10:24:48

当创建可在IE8中工作的可点击图片标签时，我使用标签的边距和填充来覆盖复选框周围的区域，我希望它可以点击。效果是覆盖标签，复选框和一些额外空白的一大可点击区域。

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

边距移动到左边，填充将标签文本推回到它应该在的位置。

的jsfiddle这种方法：http://jsfiddle.net/wydKV/

来源

2012-04-30 12:35:17 Ben

我根据你的jsfiddle创建了一个不同的版本。我的版本只是把复选框放在标签中，所以你可以添加填充，但你不必做鬼鬼祟祟的边距+填充。测试Chrome 33，IE 10和FF 27;在所有三个工作。 http://jsfiddle.net/8KHy7/2/ – 2014-03-10 23:55:33

啊，你就是！ margin + padding方法必须是IE8中具有可点击图片标签的解决方法。 – Ben 2014-03-12 08:12:30

这不是最好的解决方案，不管IE8？一般来说：将输入包裹在标签内并使用填充来放大区域？ – Ideogram 2015-05-13 09:12:57

这是一个老的文章，但我只是试图做同样的事情和填充/尺寸没有做的“打”区域的差异。我用jQuery的保存复选框在容器上（在这种情况下，TD，因为我对他们有网格，但div的应该工作）：

HTML

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

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

来源

2013-09-16 04:35:05 thinkOfaNumber

我建议使用包装标签方法。但是，如果你确实使用jQuery，那么请注意，在jQuery 1.6中不推荐使用attr（），而应该使用prop（）。 prop（）的例子：http://jsfiddle.net/eukmxqxe/3/ – Jaran 2014-08-20 07:57:56

这是最好的解决方案，我使用它并且完美地工作：点击这里http://schoberg.net/2008/10/making-better-forms-clickable-text-for-radio-button-and-checkbox-fields/

或简单地使用这个HTML代码为单选按钮或复选框：

复选框：

单选按钮：

<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>

来源

2014-03-06 21:29:24

，如果你尝试用CSS来解决这个问题，您可能会遇到的跨浏览器的问题，其原因解释here。但是，您并不需要使用JavaScript。

Alin围绕复选框添加标签的答案是最好的方法。它是valid HTML，如果您使用表列来表示选定的行，则也可以将实际的标签文本留出。

Working JSFiddle example.

<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>

来源

2014-08-20 07:50:57 Jaran

作品铬为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" />

来源

2016-08-31 13:20:49 Nico

用jQuery扩展复选框周围的可点击区域

回答

相关问题