0

我当前的代码：

    <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 隐藏它，但它没有用。如何更改单选按钮的大小？（对于隐藏我使用 jQuery）。

4

3 回答 3

1

我建议您将 LABEL 元素设置为看起来像您的按钮，而不是 DIV。

然后简单地将无线电输入绝对定位在屏幕外，当用户单击 LABEL 元素时，使用 LABEL 的“for”属性通过唯一 ID 将其链接到屏幕外无线电输入。

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

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

<label for="myID"></label>
于 2013-04-30T10:42:46.173 回答
0

您应该将单选按钮放在 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
}

来源

MDN -<label>

于 2013-04-30T10:42:22.643 回答
0

我会尝试如下：

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

于 2013-04-30T10:43:26.947 回答