Question

我正在尝试使用javascript切换到div内容的可见性，而不是jquery。我可以使用一个巨大的其他如果，但我试图使用for循环。

HTML

<fieldset >
  <legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
  <div >
    <input id="repl_id"  name="repl_name" type="radio" value="111">
    <label for="repl_id" >Bill to your Account Number.</label>
  </div>
  <div >
    <input id="repl_id"  name="repl_name" type="radio" value="222">
    <label for="repl_id" >Bill to a paymentcard.</label>
  </div>
  <div >
    <input id="repl_id"  name="repl_name" type="radio" value="333">
    <label for="repl_id" >Bill to the reciever or a third party.</label>
  </div>
  <div >
    <input id="repl_id"  name="repl_name" type="radio" value="444">
    <label for="repl_id" >Pay with check or money order.</label>
  </div>
  <div >
    <input id="repl_id"  name="repl_name" type="radio" value="555">
    <label for="repl_id" >Pay with cash.</label>
  </div>
</fieldset>

<div id="111"><p>This is 111</p></div>
<div id="222"><p>This is 222</p></div>
<div id="333"><p>This is 333</p></div>
<div id="444"><p>This is 444</p></div>
<div id="555"><p>This is 555</p></div>

的Javascript

$(":input[type='radio']").on("change", function () {
  var choice =[111,222,333,444,555];
  if ($(this).prop("checked")) {
    for(i=0; i<=choice.length; i++){
      if($(this).val() === choice[i]){
        $("#"+i).show();
      } else {
        $("#"+i).hide();
    }
  }
}

我遇到的问题是它似乎无法识别我正在迭代的数组的索引。所以它总是读错。请不要JQuery。

Answer 1

确保单选按钮的ID是唯一的。（单选按钮的名称已经相同，使其行为类似于组。）

然后使用单选按钮的值来定位div。

JS

$(":input[type='radio']").on("change", function() {
  // Hide all the divs
  $('.div-container div').hide();
  if ($(this).prop("checked")) {
    $("#" + $(this).val()).show();
  }
});

<强> HTML

<fieldset>
  <legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
  <div>
    <input id="repl_id1" name="repl_name" type="radio" value="111">
    <label for="repl_id1">Bill to your Account Number.</label>
  </div>
  <div>
    <input id="repl_id2" name="repl_name" type="radio" value="222">
    <label for="repl_id2">Bill to a paymentcard.</label>
  </div>
  <div>
    <input id="repl_id3" name="repl_name" type="radio" value="333">
    <label for="repl_id3">Bill to the reciever or a third party.</label>
  </div>
  <div>
    <input id="repl_id4" name="repl_name" type="radio" value="444">
    <label for="repl_id4">Pay with check or money order.</label>
  </div>
  <div>
    <input id="repl_id5" name="repl_name" type="radio" value="555">
    <label for="repl_id5">Pay with cash.</label>
  </div>
</fieldset>

<div class="div-container">

  <div id="111">
    <p>This is 111</p>
  </div>
  <div id="222">
    <p>This is 222</p>
  </div>
  <div id="333">
    <p>This is 333</p>
  </div>
  <div id="444">
    <p>This is 444</p>
  </div>
  <div id="555">
    <p>This is 555</p>
  </div>
</div>

<强> Check Fiddle

Answer 2

我认为这是你正在寻找的东西。

//removed the colon before input
$("input[type='radio']").on("change", function () {
  var choice =[111,222,333,444,555];
  if ($(this).prop("checked")) {
    //get the value of the checked input
    var value = $(this).val();
    //match the index to the input and show it, hide the others.
    $('#'+value).show().siblings().hide();
  }
}

这假设选择数组具有来自输入的所有值。

Answer 3

演示 - https://jsfiddle.net/of3gm5h8/1/

HTML

<fieldset>
  <legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
  <div>
    <input id="repl_id" name="repl_name" type="radio" value="111">
    <label for="repl_id">Bill to your Account Number.</label>
  </div>
  <div>
    <input id="repl_id" name="repl_name" type="radio" value="222">
    <label for="repl_id">Bill to a paymentcard.</label>
  </div>
  <div>
    <input id="repl_id" name="repl_name" type="radio" value="333">
    <label for="repl_id">Bill to the reciever or a third party.</label>
  </div>
  <div>
    <input id="repl_id" name="repl_name" type="radio" value="444">
    <label for="repl_id">Pay with check or money order.</label>
  </div>
  <div>
    <input id="repl_id" name="repl_name" type="radio" value="555">
    <label for="repl_id">Pay with cash.</label>
  </div>
</fieldset>

<div id="111" class="hide">
  <p>This is 111</p>
</div>
<div id="222" class="hide">
  <p>This is 222</p>
</div>
<div id="333" class="hide">
  <p>This is 333</p>
</div>
<div id="444" class="hide">
  <p>This is 444</p>
</div>
<div id="555" class="hide">
  <p>This is 555</p>
</div>

JS

$(function() {
  $('.hide').hide();

  $("input[type='radio']").on("change", function() {
    // Hide all the .hide divs
    $('.hide').hide();
    var checked = $(this).val();

    if (checked == "111") {
      $("#111").show();
    } else if (checked == "222") {
      $("#222").show();
    } else if (checked == "333") {
      $("#333").show();
    } else if (checked == "444") {
      $("#444").show();
    } else if (checked == "555") {
      $("#555").show();
    }
  });
});

使用javascript数组和单选按钮切换DIV的视图

3 个答案: