使文本像复选框一样行动

我正在设置一个表单，是否有可能使某个文本字符串像复选框一样操作，例如单击时突出显示它，而不显示复选框？使文本像复选框一样行动

编辑：

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

来源

2012-10-31 Roddeh

有一个很好的理由这样做呢？ –

这与[tag：php]无关，完全与CSS和HTML有关。 –

你可以使用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-31 21:04:34 Fluidbyte

好的，但我实际上想要在提交表单时检索true或false。 – Roddeh

没问题 - 更新它，所以你只需要包含'data-val'，这是'checked'时字段的值，它被作为一个值放到'input'字段中，所以当你提交表单时你可以抓住它。 – Fluidbyte

这里是一个更新的小提琴：http://jsfiddle.net/vZVNC/1/我离开输入作为'文本'而不是隐藏，所以你可以看到价值增加/删除 – Fluidbyte

这是可行的，但只能在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 
}

来源

2012-10-31 21:06:01

好，使用java脚本或jQuery是很复杂的。你简单地解决了它。 –

是的，给定t他下面的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伪类的浏览器。

我用过的属性等于符号来指定跟随检查的type="checkbox"input的label元素，但只有能够被选择，可能会被省略安全或checkbox这radio特异性。

您也可以在兼容的浏览器中使用与::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>

参考文献：

来源

2012-10-31 21:06:40

试试这个代码

<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-31 21:08:53

使文本像复选框一样行动

回答

相关问题