Question

我对JS比较陌生，正在寻找一个完成以下内容的文章或方法 - 无论是表单还是JS。（想避免使用PHP。）

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

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

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

<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>

在其checkbox媒体资源中添加每个data-detail的详细信息。请参阅上面的HTML

<强> 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

Answer 2

不确定这是否是您真正需要的，但这应该可以帮助您入门，还需要jquery

HTML

<input class="mychk" type="checkbox" value="Box 1 is Check" />Box 1<br>
<input class="mychk" type="checkbox" value="Box 2 Box is Check" />Box 2<br>
<input class="mychk" type="checkbox" value="Box 3 Box is Check" />Box 3<br>
<input class="mychk" type="checkbox" value="Box 4 Box is Check" />Box 4
<div class="showcheck">I'll Be Overwritten When Checkbox is check</div>

的jQuery

(function($) {

    //run for each input box
    $('.mychk').each( function() {

        // detect change action
        $(this).change( function() {

            // if the checkbox is check
            if( $(this).is(':checked') ) {
                //insert checkbox value in showcontent div
                $('.showcheck').html( $(this).val() );
            } else {
                // if uncheck, assign default value
                $('.showcheck').html( 'Default Content' );
            }
        });
    });
})(jQuery);

Demo here

Answer 3

Pure JavaScript回答：

HTML：

MODULE main
FROZENVAR
        p : 0..1000;
        q : 0..1000;
VAR
alice : alice(n);
    DEFINE 
        n := p * q;
MODULE alice(n)
    FROZENVAR
        r :  1 .. n;

JS：

<div id="checkboxes">

    <input id="one" type="checkbox"></input>
    <input id="two" type="checkbox"></input>
    <input id="three" type="checkbox"></input>

</div>
<div id="answer"></div>

JSfidle

选中框时发布div / text

3 个答案: