如何从嵌套单选按钮的列表中捕获选择

Question

我正在加载一个HTML页面，该页面动态地将搜索结果（书籍）填充到单选按钮附带的一组列表中。用户可以通过选择单选按钮并单击“提交”，从列表集中选择要查找的书。

如何从用户选择的单选按钮列表中捕获ISBN？下面的代码。

<form id="user_choice" action="/search" method="post">
      {% for data in data %}
          <div class="form-group">    
              <input type="radio" value="book_choice" id="choice" onClick="userSelection(document.getElementById('choice').value">
                  <ul>
                     <li> ISBN: {{ data[0] }} </li>
                     <li> Title: {{ data[1] }} </li>
                     <li> Author: {{ data[2] }} </li>
                     <li> Year: {{ data[3] }} </li>
                  </ul>
          </div>
          <br>    
      {% endfor %}
      <button class="btn btn-primary" onClick="submitUserSelection()">Select</button>
</form>

Answer 1

由于您已经获得了单击时收音机的值，因此可以将value属性更改为书籍ISBN。例如：

<form id="user_choice" action="/search" method="post">
        {% for data in data %}
            <div class="form-group">    
                <input type="radio" value="{{ data[0] }}" onClick="userSelection(this.value)">
                    <ul>
                        <li>ISBN: {{ data[0] }}</li>
                        <li>Title: {{ data[1] }}</li>
                        <li>Author: {{ data[2] }}</li>
                        <li>Year: {{ data[3] }}</li>
                    </ul>
            </div>
            <br>    
        {% endfor %}
        <button class="btn btn-primary" onClick="submitUserSelection()">Select</button>
    </form>

我也删除了重复的ID，因为您永远不想有重复的ID