css - 点击div行选择输入

Question

我正在尝试在 div 中的任何位置完成单击，它将输入单选标记为选定项。在我的情况下，只有当我点击 radio 时它才有效，在同一行的其他地方它不起作用

 <div class="row" style="padding-top:30px; cursor:pointer;"> 
    <div class="col-lg-1 col-xs-1"> 
        <div class="box"  style="margin-top:-15px"> 
            <input type="radio" name="order" class="form-radio" value="1" onclick="selectValue()" id="checkbox" />                                
        </div>                            
    </div>
    <div class="col-lg-6 col-xs-5">
        <div class="box">
           Mercedes CLS250
        </div>
    </div>
    <div class="col-lg-5 col-xs-5">
        <div class="box pull-right">
            <p style="text-align:right;">2000KB</p>
        </div>
    </div>
</div>


<div class="row" style="padding-top:30px; cursor:pointer;"> 
        <div class="col-lg-1 col-xs-1"> 
            <div class="box"  style="margin-top:-15px"> 
                <input type="radio" name="order" class="form-radio" value="2" onclick="selectValue()" id="checkbox" />                                
            </div>                            
        </div>
        <div class="col-lg-6 col-xs-5">
            <div class="box">
               Mercedes CLS350
            </div>
        </div>
        <div class="col-lg-5 col-xs-5">
            <div class="box pull-right">
                <p style="text-align:right;">300KB</p>
            </div>
        </div>
    </div>

我使用了 css 光标指针，但是当我点击时它没有选择选定的行。

Answer 1

如果我正确理解你的问题，你想要一个文本 block ，当它被点击时，它会触发输入单选按钮的点击。

为此，您只需要一个 label具有 for="input_id_goes_here" 的属性.这是一个例子:

<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">

使用该代码，您可以随时单击 label , 然后是 input将被选中。如果您想了解更多 for属性，看看this question .

仅供引用，onclick属性用于 JavaScript .

让我知道这是否有帮助，如果您还有其他问题。

更新

另一种在选择文本 block 时更改单选输入的方法是用标签包装您的输入，如下所示:

<label>Female <input type="radio" name="gender" value="female"></label>

所以对于你的代码，你所要做的就是改变<div class="row"> to <label class="row"> .

感谢@KoshVery 在下面的评论中指出这一点!