HTML 表单构造

Question

假设我在一个表单中有 4 个图标（水平条形图、垂直条形图、折线图、饼图）。

在表单提交期间，我想知道用户喜欢哪个图标。

目前我正在使用，5张图片src放在一行中。

请帮我从以下检索图表类型。

          <div class="component">
              <img src = "/images/1.png" class="cr_chart" alt="V - Bar Chart" id = "vertical_bar"/> 
              <img src = "/images/2.png" class="cr_chart" alt="H -Bar Chart" id = "horizontal_bar"/>
              <img src = "/images/3.png" class="cr_chart" alt="Line chart" id = "line_chart" />
              <img src = "/images/4.png" class="cr_chart" alt="Pie chart" id = "pie_chart"/>
          </div>

我应该在这里使用隐藏的单选按钮吗？ 如果是，请帮助我使用 jQuery 检索选择的图表类型

Answer 1

您可以为此使用 jQuery：

HTML：

<div class="component">
<form>
<input type="radio" name="radioButton" value="Vertical" />
<input type="radio" name="radioButton" value="Horizontal" />
<input type="radio" name="radioButton" value="Line" />
<input type="radio" name="radioButton" value="Pie" />
    <input type="button" id="submit" value="submit" />
</form>
</div>

JQuery:

$('#submit').on('click', function(){
alert($('input[name="radioButton"]:checked').val());
});

这里是jsFiddle