顯示相關選中單選按鈕的div

Question

嘗試使用選中的單選按鈕加載頁面時顯示div。

我有這樣的代碼，將顯示數字或輸入字段中，根據無線電點擊：

HTML：

<p><input type="radio" name="service" value="auto" checked> Automatic</p> 
<p><input type="radio" name="service" value="menu"> Menual</p> 

<div id="auto" value="1" class="details"> 
    <p id="demo"></p> 
</div> 
<div id="menu" value="2" class="details"> 
    <input name="bizid" type="number" value="" placeholder="Enter number"/> 
</div> 

JS：

$(document).ready(function() { 
    $("div.details").hide(); 
    $("input[name$='service']").click(function() { 

     // used for auto service 
     Math.floor((Math.random() * 100) + 1); 
     var x = document.getElementById("demo") 
     x.innerHTML = Math.floor((Math.random() * 100) + 1); 

     // show div of checked radio on click 
     var test = $(this).val(); 
     $("div.details").hide(); 
     $("#" + test).show(); 
    }); 
}); 

這裏是一個JSfiddle

我想根據需要進行這項工作，所以當頁面加載時會失敗l立即顯示被檢查的div ..

Answer 1

分別致電窗口負荷點擊功能。而與測試var test = $("input[name$='service']:checked").val();代替$(this).val()

改變選擇我建議使用change事件，而不是click無線電按鈕

$(document).ready(function() { 
 
    $("div.details").hide(); 
 
check(); 
 
    $("input[name$='service']").change(check); 
 
    
 
    function check() { 
 

 
    // used for auto service 
 
    Math.floor((Math.random() * 100) + 1); 
 
    var x = document.getElementById("demo") 
 
    x.innerHTML = Math.floor((Math.random() * 100) + 1); 
 

 
    // show div of checked radio on click 
 
    var test = $("input[name$='service']:checked").val(); 
 
    $("div.details").hide(); 
 
    $("#" + test).show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><input type="radio" name="service" value="auto" checked> Automatic</p> 
 
<p><input type="radio" name="service" value="menu"> Menual</p> 
 

 
<div id="auto" value="1" class="details"> 
 
    <p id="demo"></p> 
 
</div> 
 
<div id="menu" value="2" class="details"> 
 
    <input name="bizid" type="number" value="" placeholder="Enter number" /> 
 
</div>

Answer 2

最簡單的方法是手動trigger()加載DOM時的第一個無線電單擊事件。

另請注意，您可以使用jQuery的text()方法改進邏輯，並刪除其結果不使用的Math.floor。試試這個：

$("input[name$='service']").click(function() { 
 
    $('#demo').text(Math.floor((Math.random() * 100) + 1)); 
 
    $("div.details").hide(); 
 
    $("#" + $(this).val()).show(); 
 
}).first().trigger('click');

div.details { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><input type="radio" name="service" value="auto" checked> Automatic</p> 
 
<p><input type="radio" name="service" value="menu"> Menual</p> 
 

 
<div id="auto" value="1" class="details"> 
 
    <p id="demo"></p> 
 
</div> 
 
<div id="menu" value="2" class="details"> 
 
    <input name="bizid" type="number" value="" placeholder="Enter number" /> 
 
</div>

Answer 3

$(document).ready(function() { 
    $("div.details").hide(); 
set(); 
    $("input[name$='service']").click(function() { 

    // used for auto service 
    setno(); 

    // show div of checked radio on click 
    var test = $(this).val(); 
    $("div.details").hide(); 
    $("#" + test).show(); 


    }); 
}); 

function setno(){ 
    Math.floor((Math.random() * 100) + 1); 
    var x = document.getElementById("demo") 
    x.innerHTML = Math.floor((Math.random() * 100) + 1); 
} 

function set(){ 
setno(); 
if($('#chk-auto').attr('checked')){ 
    $("#auto").show(); 
} 
} 

工作的例子是here

Answer 4

試試這個

$(document).ready(function() { 
var showDiv = function() { 
    // used for auto service 
    Math.floor((Math.random() * 100) + 1); 
    var x = document.getElementById("demo") 
    x.innerHTML = Math.floor((Math.random() * 100) + 1); 
    var test = $("input[name$='service']:checked").val(); 
    $("div.details").hide(); 
    alert(test) 
    $("#" + test).show(); 
}; 
$("input[name$='service']").click(function() { 
    showDiv(); 
}); 
showDiv(); 
});