Question

我目前的代码：

    <div class="answer_divs" id="a1" style="float:left;">
        <span class="answer_span">  
            <input name="q1" type="radio" value="q1a1" style="width:10px">
            "Hello World";
        </span>
    </div>
    <div class="answer_divs" id="a2" style="float:right;">
        <span class="answer_span">  
            echo "Hello World";
        </span> 
    </div>

    <div class="answer_divs" id="a3" style="clear:both; float:left; margin-top:4px;">
        <span class="answer_span">  
            Document.Write("Hello World");
        </span>
    </div>
    <div class="answer_divs" id="a4" style="float:right; margin-top:4px;">
        <span class="answer_span">  
            System.out.print("Hello World");
        </span>
    </div>

我称这些潜水，它们看起来像按钮。现在我想在每个div中隐藏一个单选按钮，我希望它是这样的 - 没有其他我点击div的一侧，它会检查单选按钮。我不希望看到单选按钮。

我尝试用一些css更改单选按钮大小，然后用javascript隐藏它，但它没有用。如何更改单选按钮的大小？（对于hide我使用jQuery）。

Answer 1

我建议您将LABEL元素设置为按钮，而不是DIV。

然后只需将无线电输入绝对放在屏幕上，当用户点击LABEL元素时，使用LABEL的'for'属性通过唯一ID将其链接到屏幕外无线电输入。

这也具有意味着您不依赖任何JavaScript的优势。

<input type="radio" value="myValue" id="myID" />

<label for="myID"></label>

Answer 2

您应该将单选按钮放在div之外，最好是在div之后，而不是div使用标签。然后，您可以像处理div一样设置标签样式。

<input id="q1" name="q1" type="radio" value="q1a1" style="width:10px">
<label for="q1" class="answer_divs" id="a1" style="float:left;">
    <span class="answer_span">  
        "Hello World";
    </span>
</label>

然后你可以使用这样的CSS样式：

input:checked + label{
    //active CSS
}

<强>来源（S）

MDN - <label>

Answer 3

我会尝试如下：

<div class="answer_divs" id="a1" style="float:left;"> 
    <span class="answer_span">  
            "Hello World";
        </span>
    <input name="q1" type="radio" value="q1a1" style="width:10px">
</div>

点击<span>之外的单选按钮，然后按如下方式设置样式：

.answer_divs input {
    visibility: hidden;
}

请记住，整个片段（以及其他类似片段）将被包裹在<form>元素中，因此无论您如何设置单选按钮的样式都没关系，因为您将隐藏它们。

您需要创建一个jQuery操作，以便在单击.answer_divs时，它会检查子输入（无线电）按钮。

您还可以将文本包装在<label>标记中，这样当您单击标签时，它会检查按钮。但请注意，光标（在Firefox中闪烁）将向输入字段本身移动，这可能会为您提供不同的用户体验。

小提琴：http://jsfiddle.net/audetwebdesign/AXF8p/

更改单选按钮大小，将其隐藏在div中

3 个答案: