有没有一种方法可以将文本和图像包装到一个复选框元素中？

Question

我想将一些文本和图像包装到一个复选框中，因此当用户单击图像或文本时，整个区域都会突出显示。可以使用javascript吗？

我试图在下面说明我想做的事情：

      <div className="row" style={{ marginTop: '20px' }}>
        <div className="col-1" style={{ display: 'flex', alignItems: 'center' }}><input type="checkbox" id="test1" value={this.state.test1} checked={this.state.test1} onChange={() => { this.setState({ test1: !this.state.test1}) }} /></div>
        <div className="col-2"><label htmlFor="test1"><img alt="test1" src={require('../static/image.png')} /></label></div>
        <div className="col-4"><label htmlFor="test1"><b>{this.props.t('here is some text')}</b>:<br />{this.props.t('and some more')}. {this.props.t('hello!')}.</label></div>
      </div>

这是我到目前为止使用此复选框的代码。 预先感谢！

Answer 1

你可以尝试

HTML

<div>
<div class="items" style='width: 100px; height: 100px; background-color: black'></div>
<div class="items" style='width: 100px; height: 100px; background: yellow'></div>
<div class="items" style='width: 100px; height: 100px; background: gray'></div>
</div>

JAVASCRIPT

var items = document.getElementsByClassName('items');

for(var i=0; i < items.length; i++){
   (function () {
      items[i].addEventListener('click', function(){
        for(var j=0; j < items.length; j++){
          items[j].style.border = 'none';
          items[j].style.borderRadius = '0px';
        }
        this.style.border = '1px solid green';
        this.style.borderRadius = '10px';

      }, false);
   })();
}