html - 使文本像一个复选框

Question

我正在设置一个表单，是否可以使文本字符串像一个复选框一样，例如在单击时突出显示它，而不实际显示复选框？

编辑：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">    </script>
<script type="text/javascript">
$(function(){
    $('.fake-check').on('click',function(){
      if($(this).hasClass('checked')){
        $(this).removeClass('checked').children('input').val('');
      }else{
        $(this).addClass('checked').children('input').val($(this).data('val'));
      }
    });
});
</script>

<link href="test.css" rel="stylesheet" type="text/css" />
<a class="fake-check" data-val="somevalue">Something<input type="text"   name="somefield"></a>

score 3 · Accepted Answer

是的，给定以下 HTML：

&lt;input type="checkbox" id="test" /><label for="test">Click to check</label>

和CSS：

label {
    color: #f00;
}

input {
    display: none;
}

input[type=checkbox]:checked + label {
    color: #0f0;
}

label {
  color: #f00;
}
input {
  display: none;
}
input[type=checkbox]:checked + label {
  color: #0f0;
}

<input type="checkbox" id="test" checked/>
<label for="test">Click to check</label>

JS 小提琴演示。

当然，这取决于实现:checked伪类的浏览器。

我使用了属性等于符号来指定检查后的label元素，但由于只能选择或，因此可以安全地省略该特异性。inputtype="checkbox"checkboxradio

您还可以在兼容的浏览器中使用与::after伪元素及其content属性一致的相同方法，更改文本以反映复选框的状态。例如，使用以下 HTML：

&lt;input type="checkbox" id="test" /><label for="test">Click to</label>

和CSS：

label {
    color: #f00;
}

input {
    display: none;
}

input[type=checkbox]:checked + label {
    color: #0f0;
}

input[type=checkbox] + label::after {
    content: ' check';
}

input[type=checkbox]:checked + label::after {
    content: ' uncheck';
}

label {
  color: #f00;
}
input {
  display: none;
}
input[type=checkbox]:checked + label {
  color: #0f0;
}
input[type=checkbox] + label::after {
  content: ' check';
}
input[type=checkbox]:checked + label::after {
  content: ' uncheck';
}

<input type="checkbox" id="test" checked/>
<label for="test">Click to</label>

参考：

score 1 · Accepted Answer

你可以使用 jQuery 并且很容易地做到这一点：

HTML：

<a class="fake-check" data-val="somevalue">
    Something
    <input type="hidden" name="somefield">
</a>

CSS：

.checked { background: red; }

JavaScript：

$('.fake-check').on('click',function(){
  if($(this).hasClass('checked')){
      $(this).removeClass('checked').children('input').val('');
  }else{
      $(this).addClass('checked').children('input').val($(this).data('val'));
  }
});

这是小提琴：http: //jsfiddle.net/vZVNC/

score 1 · Accepted Answer

这将有效，但仅适用于 CSS3 浏览器：

<input type="checkbox" id="a" name="a" class="hideMe"> &lt;label for="a">Something</label>

</p>

.hideMe {
    height:0;
    width:0;
    visibility:hidden;   
}    

input:checked + label {
    background-color:#e0e0e0
}

score 0 · Accepted Answer

试试这个代码

<html>
    <head>
    <title>Untitled Document</title>

    <script type="text/javascript">
    var is_highlighted = false;
    function textclicked(text){
        if(is_highlighted == false){
            text.style.background = '#FFFF99';
            is_highlighted = true;
        }
        else{
            text.style.background = 'none';
            is_highlighted = false;
        }

    }
    </script>
    </head>

    <body>
    <a style="cursor:pointer;" onclick="javascript:textclicked(this)">some text which act like checkbox</a>
    </body>
    </html>

html - 使文本像一个复选框

4 回答 4

Related

Reference