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

我想根据需要进行此操作，因此当页面加载时，它会立即显示已检查的div ..

Answer 1

最简单的方法是在加载DOM的第一个无线电上手动trigger()点击事件。

另请注意，您可以使用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 2

在窗口加载时单独调用click函数。并使用test 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 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();
});

显示相关选中的单选按钮div

4 个答案: