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>

Answer 1

是的，给出以下HTML：

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

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

我使用了属性等号表示法来指定label input type="checkbox"之后的checkbox元素，但只有radio或{{1}可以选择，可以安全地省略该特异性。

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

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

参考文献：

Answer 2

您可以使用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/

Answer 3

这样可行，但仅适用于CSS3浏览器：

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

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

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

Answer 4

试用此代码

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

使文字像一个复选框

4 个答案: