通過輸入單選ID啟用表單（已選中）

Question

我有兩種形式。 我希望用戶通過上面的單選按鈕之一選擇啟用其中之一。

我想做的就是獲取單選按鈕的值，並通過此值使其中一種形式啟用。

所以我嘗試使用JavaScript並輸入單選ID，但沒有成功：

 <script> window.addEventListener('load', init); function init(){ var radio = document.getElementsByName ("questions"); for (var i=0; i<radios.length; i++) { if(radio[i].getElementById.checked == "questions_1") { radio[i].addEventListener(seleccionar); } } function trigger() { elementsForm = document.forms['question'].elements; for (var y=0; y<elementsForm.length; y++) { elementsForm[y].disabled=false; } } </script>

這是我的代碼（HTML和CSS）：

.category_1 {
    height: 50px;
    padding-top: 2%;
}

.question {
    display: inline-flex;
    margin-left: 5%;
}

.q-text {
    font-weight: 600;
}

.q1 {
    width: 44%;
}

.q2 {
    width: 44%;
}

.form {
    display: inline-flex;
    margin-left: 5%;
}

.form.q1 {
    width: 44%;
}

.form.q2 {
    width: 44%;
}

.data {
    margin-top: 5%;
}

.data label {
    opacity: 0.5;
}

input[type=text] {
    width: 100%; 
}

select {
    width: 100%;
}

textarea {
    width: 98%;
}

input[type=submit] {
    display: block;
    margin: auto;
}

  <body>

<div class="category_1">

    <div class="question q1"><input type="radio" name="question" value="question_1" id="question_1">
    <div class="q-text">QUESTION 1</div></div>

    <div class="question q2"><input type="radio" name="question" value="question_2" id="question_2">
    <div class="q-text">QUESTION 2</div></div>

</div>

<div class="form q1">
<form name="q1" method="post" action="">

<div class ="data">
    <label for="others">Name:</label>
    <input type="text" name="name" disabled>     
</div>

<div class="data">
        <label for="others">Select an item:</label>
        <select name="items-q1" disabled>
            <option value="it1">item 1</option>
            <option value="it2">item 2</option>
            <option value="it3">item 3</option>
            <option value="it4">item 4</option>
        </select>
</div>

<div class="data">
        <label for="others">Anything else?</label>
        <textarea name="more" disabled></textarea>
</div>

<div class="data">
        <input type="submit" value="submit" disabled>
</div>
</form>
</div>


<div class="form q2">
    <form name="q2" method="post" action="">

<div class ="data">
    <label for="others">Name:</label>
    <input type="text" name="name" disabled>    
</div>

<div class ="data">
<label for="others">Choose an option:</label><br>
<input type="radio" name="option" value="o1" disabled><label for="others">1</label>
<input type="radio" name="option" value="o2" disabled><label for="others">2</label>     
</div>    


<div class="data">
        <label for="others">Anything else?</label>
        <textarea name="more" disabled></textarea>
</div>    


<div class="data">
        <input type="submit" value="submit" disabled>
</div>
</form>
</div> 
</body>

我真的很感謝任何建議。

Answer 1

首先，我注意到您用錯誤的名稱來獲取收音機，其名稱是“問題”而不是“問題”

<script>
    var rad = document.getElementsByName('question');
    for(var i = 0; i < rad.length; i++) {
        rad[i].onclick = function() {
        if(this.value == "questions_1") {
        //input logic to display form
        //This is where you run isTrue() Function
           isTrue(data);
        }
        else{
         //This is where you run isFalse() function
         isFalse(data);
        }
          };
        }
//Function to run if its true
    function isTrue(data){
       //something equals something
    }

//Function to run if its false
function isFalse(data){
   //something equals something
}
</script>

參考鏈接

Answer 2

 <script> var rad = document.getElementsByName('question'); for(var i = 0; i < rad.length; i++) { rad[i].onclick = function () { if(this.value == "question_1") { e1(); }else { e2(); } }; } function e1() { var eform1 = document.querySelectorAll('.q1 input[type=text], .q1 select, .q1 textarea, .q1 input[type=submit]'); for(var i = 0; i < eform1.length; i++) { eform1[i].disabled = false; } } function e2() { var eform2 = document.querySelectorAll('.q2 input[type=text], .q2 input[type=radio], .q2 textarea, .q2 input[type=submit]'); for(var i = 0; i < eform2.length; i++) { eform2[i].disabled = false; } } </script>

通過輸入單選ID啟用表單（已選中）

問題描述

2 個解決方案

解決方案1
0 2016-08-17 01:34:17

解決方案2
0 2016-09-01 21:54:22

通過輸入單選ID啟用表單（已選中）

問題描述

2 個解決方案

解決方案1 0 2016-08-17 01:34:17

解決方案2 0 2016-09-01 21:54:22

解決方案1
0 2016-08-17 01:34:17

解決方案2
0 2016-09-01 21:54:22