javascript - onLoad 检测单选按钮是否被选中

Question

我正在尝试进行 onLoad 检测以查看是否选中了单选按钮。如果是的话我想将一些文本输出到 div 中。目前它在加载时不起作用，并且该功能仅在点击时起作用。

我使用本地存储来记住用户是否在刷新时选择了某些字段，这工作正常 - 因此刷新之前选择的任何单选按钮都会显示在刷新之后。

这是更改 onLoad 文本的代码:

$(document).ready(function() {
    var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();

    if (circuitNum == 'As many as possible per metre') {
     $('#circuit').text('As many as possible per metre');
    }
}

查看完整代码:

	// Circuit Select

	// Toggle Metre Question and fill out summary
		$('input[name="options[numberCircuitsMetre]"]').click(function(){
				if($(this).attr("value")=="As many as possible per metre"){
						$(".toggleQuestion").hide();
						$('#circuit').text('As many as possible per metre');
				}
				if($(this).attr("value")=="Custom number"){
						$(".toggleQuestion").show();
				}
		});

	var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();

	if (circuitNum == 'As many as possible per metre') {
	 $('#circuit').text('As many as possible per metre');
	}
	if (circuitNum == 'Custom number') {
		if($('.circuitsNum').val() == ''){
 			$('.circuitsValidation').html("<span class='flash'>Please add the number of circuits you want per metre</span>");
 			$('.circuitsNum').addClass("errorBorder");
 			var errorMessage = 'true';
 	  } else {
			$('#circuit').text('#circuitsNum'.value || '');
		}
		$(".toggleQuestion").show();
	}
	$("#circuitsNum").on('change keydown paste input', function() {
		$('#circuit').text(this.value || '');
	}).change();
  
  	$('#no').click(function() {
		var term = $('#circuitsNum').val();
		$('#circuit').text(term || '');
	});

.radio-toggle {
  margin-bottom: 30px;
}
.toggleQuestion {
  display: none;
  padding-top: 20px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<!-- No. of Circuit Designs -->
                  <fieldset>
                    <label>Do you want as many circuit designs per metre as possible?</label>

                    <div class="radio-toggle">
                    <div class="row collapse radio-shack">

                      <div class="large-6 columns">
                        <div class="radio-margin">
                        <div class="radio-zone">
                          <input type="radio" name="options[numberCircuitsMetre]" id="yes" class="substrate" value="As many as possible per metre" checked="checked" />
                          <div class="check-cover">
                          </div>
                          <div class="check"></div>
                          <label for="yes">
                            <div class="label-head"><strong>Yes</strong></div>
                          </label>
                        </div>
                        </div>
                      </div>

                      <div class="large-6 columns">
                        <div class="radio-margin">
                        <div class="radio-zone">
                          <input type="radio" name="options[numberCircuitsMetre]" id="no" class="substrate" value="Custom number"/>
                          <div class="check-cover">
                          </div>
                          <div class="check"></div>
                          <label for="no">
                            <div class="label-head"><strong>No</strong></div>
                          </label>
                        </div>
                        </div>
                      </div>

                    </div>
                    </div>

                  <div class="toggleQuestion">
                    <label>How many circuit designs per metre would you like?</label>
                   
                    <input type="number" name="options[numberCircuits]" step="any" placeholder="Add the number of circuits per metre..." class="circuitsNum number" id="circuitsNum">
                    <p class="circuitsValidation"></p>
                  </div>

                  </fieldset>
                  
                  
   <div class="summary-row">
        <div class="summary-cell summary-head">
          <strong>No. of circuits:</strong>
        </div>
        <div class="summary-cell">
          <span id="circuit"></span>
        </div>
      </div>

Answer 1

试试这个https://jsfiddle.net/0zzdkb32/44/我只是添加这段代码

$(document).ready(function() {
  $('input[name="options[numberCircuitsMetre]"]').each(function() {
    if ($(this).val() == localStorage.getItem('selected')) {
      $(this).click();
      if($(this).val()=="As many as possible per metre"){
          $(".toggleQuestion").hide();
          setTimeout(function(){
            $('#circuit').text('As many as possible per metre');
          }, 100);
      }
      if($(this).attr("value")=="Custom number"){
          $(".toggleQuestion").show();
      }
    }
  });
})

并添加

localStorage.setItem('selected', $(this).val());

在您的点击事件中