Question

我有以下代码，它使用单选按钮生成数据列表：

 <div class="inline-radio">
   {% for a in TimeInfo %}
     <div class="row radio-row full-width no-padding">
      <label class="radio-label-multiline font-weight-normal no-padding no-margin" for="slot_308395561">
        <div class="columns small-1 width20 no-margin no-padding">
          <input id="slot_308395561" name="form[slots]" required="required" value="" data-value="308395561" checked="checked" type="radio">
        </div>
     <div class="columns small-11 no-margin no-padding" id="slot_label_308395561"><span>{{ a.slotStartTime }} at {{ a.c.address}}</span></div></label></div>
   {% endfor %}
 </div>

我想在标签或文本框中显示所选复选框的值。我试图使用javascript但它没有显示结果。

Answer 1

您正在设置所有的单选按钮＆＃39;值为空字符串：value=""。这并没有多大意义，特别是因为你想在其他地方显示所选的单选按钮值。

将其值设置为a的某个属性：

{% for a in TimeInfo %}
    // ...
    <input type="radio" ... value="{{ a.value }}" />
{% endfor %}

您认为使用JavaScript显示所选值是正确的。我无法解释为什么它没有工作（没有看到你已经尝试过的东西），但是在其他元素中显示所选单选按钮的值的过程是（在简单的JS中）：

// Find the selected radio button's value
var radioButtons = document.getElementsByName('form[slots]');
var value;

for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
        value = radioButtons[i].value;
    }
}

// Now display var value in another element:

// Say we have a header tag with an id: <h2 id="selectedValue"></h2>
var headerElement = document.getElementById('selectedValue');
headerElement.innerHTML = value;

当然，这只会执行一次。要在选择单选按钮时更新<h2>，您需要在单选按钮上收听change event。

或者使用jQuery：

$('input[name="form[slots]"]').on('change', function() {
    $('#selectedValue').text(this.value);
});

最后一个逻辑错误。您将每个单选按钮设置为checked，但一次只能检查一个单选按钮。

{% for a in TimeInfo %}
    // ...
    <input type="radio" ... {% if a.someProperty %}checked{% endif %} /> // assuming a is a PHP object and someProperty is boolean
    // the presence of the checked attribute is the same as
    // checked="checked" == checked="true" == checked="ducks"
{% endfor %}

在文本框/标签上显示复选框值

1 个答案: