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

时间:2013-04-30 10:34:25

标签: jquery html css

我目前的代码:

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

3 个答案:

答案 0 :(得分:1)

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

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

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分: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/