首页 文章

如何使用可点击标签创建HTML复选框

提问于
浏览
873

如何创建一个带有可点击标签的HTML复选框(这意味着单击标签会打开/关闭复选框)?

10 回答

  • 12

    只需确保标签与输入相关联即可 .

    <fieldset>
      <legend>What metasyntactic variables do you like?</legend>
    
      <input type="checkbox" name="foo" value="bar" id="foo_bar">
      <label for="foo_bar">Bar</label>
    
      <input type="checkbox" name="foo" value="baz" id="foo_baz">
      <label for="foo_baz">Baz</label>
    </fieldset>
    
  • 3
    <label for="vehicle">Type of Vehicle:</label>
    <input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
    
  • 48
    <label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
    
  • 3

    使用 label 元素和 for 属性将其与复选框关联:

    <label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

  • 7

    这应该可以帮到你:W3Schools - Labels

    <form>
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" />
      
    <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
  • 1657

    方法1:包装标签

    将复选框包装在 label 标记内:

    <label><input type="checkbox" name="checkbox" value="value">Text</label>
    

    方法2:使用for属性

    使用 for 属性(匹配复选框 id ):

    <input type="checkbox" name="checkbox" id="checkbox_id" value="value">
    <label for="checkbox_id">Text</label>
    

    NOTE :页面上的ID必须是唯一的!

    解释

    由于其他答案没有提到它,标签最多可以包含1个输入并省略 for 属性,并且假定它是用于其中的输入 .

    摘自w3.org(我的重点):

    [for属性]显式将正在定义的标签与另一个控件相关联 . 如果存在,则此属性的值必须与同一文档中某个其他控件的id属性的值相同 . 缺席时,定义的标签与元素的内容相关联 . 要隐式地将标签与另一个控件相关联,控制元素必须位于LABEL元素的内容中 . 在这种情况下,LABEL可能只包含一个控制元素 . 标签本身可以位于相关控件之前或之后 .

    使用此方法比 for 有一些优势:

    • 无需为每个复选框分配 id (太棒了!) .

    • 无需使用 <label> 中的额外属性 .

    • 输入's clickable area is also the label' s可点击区域,因此没有两个单独的位置可以控制复选框 - 只有一个,无论 <input> 和实际标签文本有多远,无论您应用什么类型的CSS它 .

    用一些CSS演示:

    label {
     border:1px solid #ccc;
     padding:10px;
     margin:0 0 10px;
     display:block; 
    }
    
    label:hover {
     background:#eee;
     cursor:pointer;
    }
    
    <label><input type="checkbox" />Option 1</label>
    <label><input type="checkbox" />Option 2</label>
    <label><input type="checkbox" />Option 3</label>
    
  • -5
    <label for="my_checkbox">Check me</label>
    <input type="checkbox" name="my_checkbox" value="Car" />
    
  • 2

    它也有效:

    <form>
        <label for="male"><input type="checkbox" name="male" id="male" />Male</label>
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label> </form>
  • 1

    用这个

    <input type="checkbox" name="checkbox" id="checkbox_id" value="value">
    <label for="checkbox_id" id="checkbox_lbl">Text</label>
    
    
    $("#checkbox_lbl").click(function(){ 
        if($("#checkbox_id").is(':checked'))
            $("#checkbox_id").removAttr('checked');
        else
           $("#checkbox_id").attr('checked');
        });
    });
    
  • 0

    您还可以使用CSS伪元素从所有复选框的值属性中分别选择和显示标签 .
    Edit: 这只适用于基于webkit和blink的浏览器(Chrome(ium),Safari,Opera ....),因此大多数移动浏览器都适用 . 这里没有Firefox或IE支持 .
    这可能仅在将webkit / blink嵌入到您的应用程序时才有用 .

    <input type="checkbox" value="My checkbox label value" />
    <style>
    [type=checkbox]:after {
        content: attr(value);
        margin: -3px 15px;
        vertical-align: top;
        white-space:nowrap;
        display: inline-block;
    }
    </style>
    

    所有伪元素标签都是可点击的 .

    演示:http://codepen.io/mrmoje/pen/oteLlThe gist of it

相关问题