单选按钮在页面加载时在父元素上显示/隐藏

Question

In the below code, show/hide is not happening on page reload. If I check another radio button after page reloading, it's working. Help me to resolve the same.

 $(window).load(function(){ $("[name=image_type]").on("change",imageTypeToggle); }) function imageTypeToggle(){ let selectedValue, $showElements, $hideElements; selectedValue = $(this).val(); $hideElements = $(this).parents(".image_video_sec").find(".image_sec, .video_sec"); $hideElements.hide().find("input").attr('disabled',true); if(selectedValue == "0") { $showElements = $(this).parents(".image_video_sec").find(".image_sec"); } else if(selectedValue == "1") { $showElements = $(this).parents(".image_video_sec").find(".video_sec"); } $showElements.show().find("input").attr('disabled',false); };

 <div class="image_video_sec"> <label class="on"> <input type="radio" name="image_type" value="0" checked>R1 </label> <label> <input type="radio" name="image_type" value="1">R1 </label> <dl class="image_sec">Image</dl> <dl class="video_sec">Video</dl> </div> <div class="image_video_sec"> <label class="on"> <input type="radio" name="image_type" value="0" checked>R1 </label> <label> <input type="radio" name="image_type" value="1">R1 </label> <dl class="image_sec">Image</dl> <dl class="video_sec">Video</dl> </div>

Answer 1

One way to do it is to trigger a click on the radio button when the document loads. (I changed your $(window).load (which was throwing an error) to $(document).ready .

$("[name=image_type]").eq(0).trigger('click')

 $(document).ready(function() { $("[name=image_type]").on("change", imageTypeToggle); $(".image_video_sec").each(function() { $(this).find("[name=image_type]").eq(0).trigger('click') }) }) function imageTypeToggle() { let selectedValue, $showElements, $hideElements; selectedValue = $(this).val(); $hideElements = $(this).parents(".image_video_sec").find(".image_sec, .video_sec"); $hideElements.hide().find("input").attr('disabled', true); if (selectedValue == "0") { $showElements = $(this).parents(".image_video_sec").find(".image_sec"); } else if (selectedValue == "1") { $showElements = $(this).parents(".image_video_sec").find(".video_sec"); } $showElements.show().find("input").attr('disabled', false); };

 .image_sec, .video_sec { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image_video_sec"> <label class="on"> <input type="radio" name="image_type" value="0" checked>R1 </label> <label> <input type="radio" name="image_type" value="1">R1 </label> <dl class="image_sec">Image</dl> <dl class="video_sec">Video</dl> </div> <div class="image_video_sec"> <label class="on"> <input type="radio" name="image_type" value="0" checked>R1 </label> <label> <input type="radio" name="image_type" value="1">R1 </label> <dl class="image_sec">Image</dl> <dl class="video_sec">Video</dl> </div>