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

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

Answer 1

我建议您设计一个 LABEL 元素，使其看起来像您的按钮，而不是 DIV。

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

这也意味着您不依赖任何 javascript 的优势。

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

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