切換視圖的DIV使用javascript數組和單選按鈕

Question

我想切換到div內容使用JavaScript，而不是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

演示 - 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(); 
    } 
    }); 
}); 

Answer 2

確保單選按鈕的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 3

我認爲這是你在找什麼。

//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(); 
    } 
} 

這假定選擇數組具有來自輸入的所有值。