1

フォームを設定していますが、実際にチェックボックスを表示せずに、テキスト文字列をチェックボックスのように機能させ、たとえばクリックしたときに強調表示することは可能ですか?

編集：

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

4 に答える 4

3

はい、次の 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続く要素を指定するために attribute-equals 表記を使用しましたが、選択できるのはorのみであるため、その特定性は安全に省略できます。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>

参考文献:

于 2012-10-31T21:06:40.047 に答える
1

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/

于 2012-10-31T21:04:34.293 に答える
1

これは機能しますが、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
}
于 2012-10-31T21:06:01.573 に答える
0

このコードを試してください

<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>
于 2012-10-31T21:08:53.237 に答える