Question

我正在尝试在页面上填充单选输入值，但是下面使用的代码不起作用。它不会填充，获取或显示在数据库和首页上。

$(document).ready(function() {
    $('.trigger').click(function() {
      $('.show_field').hide();
      $('.' + $(this).data('rel')).show();
    });
});

.show_field {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label class="col-sm-3  control-label">Question here?</label>
  <div class="col-sm-5">
    <label>
            <input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
        </label>
    <label>
            <input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
        </label>
    <label>
            <input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
        </label>
  </div>
</div>

Answer 1

我相信您遇到的问题本质上是句法上的。如果您的代码与上面的代码完全相同，那么您就错过了});上的结尾$(document).ready(function(){});。

我已经在此Fiddle中重新创建了您的代码。据我了解您的问题，它似乎正在工作。

Answer 2

除了您的HTML和JavaScript不正确的事实之外，我还将尝试向您展示如何根据所选值显示和隐藏元素。

$(document).ready(function() {
	$('.trigger').click(function() {
		$('.show_field').hide();
		$('.' + $(this).data('rel')).show();
	});
});

.show_field {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3  control-label">Question here?</label>
<div class="col-sm-5">
    <label>
        <input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
    </label>
    <label>
        <input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
    </label>
    <label>
        <input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
    </label>
</div>

<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>

要动态设置单选组的检查值，请首先选择单选组，然后根据数据相关属性用单选输入指定它。

var value = 'yes';

$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');

无线电输入值未填充

2 个答案: