javascript - 选中复选框后发布 div/文本

Question

我对 JS 比较陌生，正在寻找一篇文章或方法来完成以下任务 - 无论是表单还是只是 JS。 (想避免使用 PHP。)

我有一系列复选框，称为框 1 - 4，当选中其中任何一个时，应显示一个 div 或将文本发布到页面上的特定 div。

示例:当框 1 被选中时 div A 发布“框 1 已被选中。”

我不确定如何优化我的搜索以找到我正在寻找的示例，但确实找到了一个具有类似技术的 jsfiddle，该技术在激活时在复选框下发布一个文本框。

DEMO

<input id="chk" type="checkbox" value="results" />Results
<div id="formContainer"></div>

var textboxId = 0;

function CreateTextbox() {
    var textBox = document.createElement("input");
    textBox.setAttribute("type", "textbox");
    textBox.setAttribute("id", textboxId);
    textboxId++;
    return textBox;
}

document.getElementById("chk").onclick = function () {
    if (textboxId == 0) {
         document.getElementById("formContainer").appendChild(CreateTextbox(textboxId));
        textboxId = 1;
    } else if (textboxId == 1) {
        document.getElementById("formContainer").innerHTML = '';
        textboxId = 0;
        //The code to remove the previosuly made textbox
    }
}

任何方向或代码想法都值得赞赏。谢谢!

Answer 1

希望这是您所期待的。

$('.chkbox').on('click',function(){
   if($(this).is(':checked')) //check if checkbox is checked or unchecked
   {
       $(this).next('.formContainer').html('<div class="new">'+$(this).data('detail')+'</div>'); 
       //get detail to add from the clicked checkbox's data-* attribute
   }
   else
   {
       $(this).next('.formContainer').html('');
       //just empty the html below it
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="chk" data-detail="Box one has been checked." class="chkbox" type="checkbox" value="results" />Results
<div class="formContainer"></div>
<input id="chk2" data-detail="Box two has been checked." class="chkbox" type="checkbox" value="results" />Results
<div class="formContainer"></div>
<input id="chk3" data-detail="Box three has been checked." class="chkbox" type="checkbox" value="results" />Results
<div class="formContainer"></div>
<input id="chk4" data-detail="Box four has been checked." class="chkbox" type="checkbox" value="results" />Results
<div class="formContainer"></div>

Add detail for each checkbox in its data-detail property. Refer html above

<强> Extenal Demo

<小时/>

更新

要在单个 div 中显示所有文本，您只需引用目标元素即可，如下所示:

$('.chkbox').on('click',function(){
   if($(this).is(':checked'))
   {
       $('.formContainer').html('<div class="new">'+$(this).data('detail')+'</div>'); //directly refer the element
   }
   else
   {
       $('.formContainer').html('');
   }
});

<强> Updated demo