無線電輸入值未填充

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');