我正在构建多个复选框。我想添加功能答案

【问题标题】：I am building multiple checkboxes. I want to add the functionality我正在构建多个复选框。我想添加功能
【发布时间】：2017-11-02 12:59:40
【问题描述】：

我正在构建多个复选框。我想添加功能，在一组复选框中，只有一个复选框应该检查正确或错误的值。选择所有组后，提交按钮应启用。单击提交按钮后，应显示每个组的值（正确或错误答案）。我该怎么做？

function isChecked(checkbox, sub1) {
    document.getElementById(sub1).disabled = !checkbox.checked;
}


$("input:checkbox").on('click', function() {
    var $box = $(this);
    if ($box.is(":checked")) {
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        $(group).prop("checked", false);
        $box.prop("checked", true);
        //alert("checked");

    } else {
        $box.prop("checked", false);
    }

    var bool;
    $("input.checkbox").change(function() {
        bool = $(".checkbox:not(:checked)").length != 6;

        // enable/disable
        $("#submitbutton").prop('disabled', bool).addClass('btn');

        // $("#submitbutton").removeAttr("disabled", bool).addClass("btn");
        //$('#submitbutton').removeClass('btn1').prop(':disabled', bool).addClass('btn');
        <!--		alert('right')-->
    }).change('color');


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" class="checkbox checkbox_1" id="button0" name="fooby[0][]" value="chk0" />
<input type="checkbox" class="checkbox checkbox_1" id="button1" name="fooby[0][]" value="chk0" />
<br>

<input type="checkbox" class="checkbox checkbox_1" id="button2" name="fooby[1][]" value="chk1" />
<input type="checkbox" class="checkbox checkbox_1" id="button3" name="fooby[1][]" value="chk2" /><br>

<input type="checkbox" class="checkbox checkbox_1" id="button4" name="fooby[2][]" value="chk3" />
<input type="checkbox" class="checkbox checkbox_1" id="button5" name="fooby[2][]" value="chk4" />
<br>

<input type="checkbox" class="checkbox checkbox_1" id="button6" name="fooby[3][]" value="chk5" />
<input type="checkbox" class="checkbox checkbox_1" id="button7" name="fooby[3][]" value="chk6" />
<br>

<input type="checkbox" class="checkbox checkbox_1" id="button8" name="fooby[4][]" value="chk7" />
<input type="checkbox" class="checkbox checkbox_1" id="button9" name="fooby[4][]" value="chk8" />
<br>

<input type="checkbox" class="checkbox checkbox_1" id="button10" name="fooby[5][]" value="chk9" />
<input type="checkbox" class="checkbox checkbox_1" id="button11" name="fooby[5][]" value="chk10" /> <br>

<input type="submit" value="Submit" id="submitbutton" disabled="disabled" class="btn" />

【问题讨论】：

“在一组复选框中，只有一个复选框应该检查正确或错误的值”——为什么不使用单选按钮？这样就不需要 JavaScript。
感谢您分享您的问题 Blazemonger。在我的整个项目中，我只使用复选框。所以我更喜欢保持原样。
@ArunJack 从用户体验的角度来看，这是一种非常糟糕的网站设计方式。
这不是一个好的理由。如果我理解正确，您所描述的功能正是单选按钮的功能。还有 UX（用户体验）的问题——用户会看到复选框（正方形）而不是单选按钮（圆圈）并期望某种行为。
这个想法有点疯狂，但可以使用切换按钮来做到这一点（http://bootstrapswitch.com/examples.html 或https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch 如何）

标签： javascript jquery css arrays html

【解决方案1】：

如 cmets 中所述，您可以使用 RadioButton 而不是 Checkbox 这将处理您的检查内容。但是，要启用 submit 按钮，您必须做一些数学运算，通过验证选中的单选按钮的数量是否是单选按钮总数的一半：

if($("input[type='radio']").length/2==$("input[type='radio']:checked").length)
{
$(".btn").prop("disabled","");
}

最后，这是一个演示：

$("input[type='radio']").on("change",function(){
if($("input[type='radio']").length/2==$("input[type='radio']:checked").length)
{
$(".btn").prop("disabled","");
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" class="checkbox checkbox_1" id="button0" name="fooby[0][]" value="chk0" />   
 	 <input type="radio"  class="checkbox checkbox_1" id="button1" name="fooby[0][]" value="chk0" />
     <br>

    <input type="radio" class="checkbox checkbox_1" id="button2" name="fooby[1][]" value="chk1"  /> 
    <input type="radio" class="checkbox checkbox_1"  id="button3" name="fooby[1][]" value="chk2" /><br>

  	<input type="radio" class="checkbox checkbox_1" id="button4" name="fooby[2][]" value="chk3" />   
 	 <input type="radio"  class="checkbox checkbox_1" id="button5" name="fooby[2][]" value="chk4" />
     <br>

     <input type="radio" class="checkbox checkbox_1" id="button6" name="fooby[3][]" value="chk5" />   
 	 <input type="radio"  class="checkbox checkbox_1" id="button7" name="fooby[3][]" value="chk6" />
          <br>

     <input type="radio" class="checkbox checkbox_1" id="button8" name="fooby[4][]" value="chk7" />   
 	 <input type="radio"  class="checkbox checkbox_1" id="button9" name="fooby[4][]" value="chk8" />
               <br>

     <input type="radio" class="checkbox checkbox_1" id="button10" name="fooby[5][]" value="chk9" />   
 	 <input type="radio"  class="checkbox checkbox_1" id="button11" name="fooby[5][]" value="chk10" /> <br>
    
	<input type="submit" value="Submit"  id="submitbutton" disabled="disabled" class="btn"/>

【讨论】：

提交后，我看不到写或错误的答案值..
@ArunJack 这取决于您在第二页中检索数据的方式，并且我没有此页面的代码，因此我无法处理另一侧显示的内容。我刚刚使代码按照您的问题中的描述工作
但是我没有得到我期望的答案，实际上如果我根据用户检查的值选择每个组中的任何一个复选框，每个组的值应该计算，一旦它点击提交按钮答案应该显示

【解决方案2】：

<FORM NAME=MAIN>

<SCRIPT>

HTML = [];
function PRINT(L, X) { HTML.push(L.split("#").join(X)); }
function FLUSH() { document.write(HTML.join("")); HTML = []; }

COOKIE = "ANSWERS";
function SetCookie(NAME, VALUE) { var E = new Date(); E.setFullYear(E.getFullYear() + 5); document.cookie = NAME + "=" + VALUE + ";Expires=" + E.toGMTString(); }
function GetCookie(NAME) { var i, e, s, K = document.cookie.split(";"); for (i = 0; i < K.length; i++) { for (s = 0; K[i].charCodeAt(s) < 33; s++); e = K[i].indexOf("="); if (K[i].substring(s, e) == NAME) return K[i].slice(++e); } return ""; }

BOX_COLOR = "0033CC";
TEXT_COLOR = "FFFFFF";
ROW_COLORS = "111133 333355".split(" ");
Q = "Do you speak English?|Do you have an Apple iPhone X ?|Do you write JavaScript?|Have you ever caught an alligator?|Did you eat it?|Do you like winter?|Is the earth big?|Zero equals false. Agree?|Does your laptop run on 19 volts?".split("|");

ANSWER = GetCookie(COOKIE);
if (ANSWER && ANSWER != null) ANSWER = ANSWER.split(","); else ANSWER = [];
for (i = ANSWER.length; i < Q.length; i++) ANSWER.push(0);

PRINT("<TABLE CELLSPACING=1 CELLPADDING=7 BGCOLOR=#>", BOX_COLOR);
PRINT("<TR><TD>#True<TD>#False<TD>#Questions", "<FONT COLOR=" + TEXT_COLOR + ">");
for (i = 0; i < Q.length; i++)
{
  PRINT("<TR BGCOLOR=#>", ROW_COLORS[i&1]);
  PRINT("<TD><CENTER><INPUT "+(ANSWER[i]==1?"CHECKED":"")+" NAME=X#A TYPE=CHECKBOX onClick='K(#, 1);'>", i);
  PRINT("<TD><CENTER><INPUT "+(ANSWER[i]==2?"CHECKED":"")+" NAME=X#B TYPE=CHECKBOX onClick='K(#, 2);'>", i);
  PRINT("<TD onClick='K(#, 0);'><FONT COLOR="+TEXT_COLOR+">"+(i+1)+". " + Q[i], i);
}
PRINT("</TABLE><P>");
PRINT("<INPUT TYPE=BUTTON VALUE=' Get Answers ' onClick='alert(ANSWER);'>");
PRINT("<INPUT TYPE=BUTTON VALUE=' Delete Answers ' onClick='DeleteAnswers();'>");
PRINT("<INPUT TYPE=BUTTON "+(isComplete()?"":"DISABLED")+" NAME=NEXT VALUE=' NEXT ' onClick='Next();' onMouseOver='CheckAnswers();'>");
FLUSH();

function K(N, V)  // Click event handler
{
  var A = 1;
  if (ANSWER[N] == 1 || (ANSWER[N] == 0 && V == 2)) A = 0;
  ANSWER[N] = (A) ? 1 : 2;
  eval("document.MAIN.X"+N+"A.checked = A;");
  eval("document.MAIN.X"+N+"B.checked = !A;");

  CheckAnswers();
  SaveAnswers();
}

function isComplete() { for (var i = 0; i < Q.length; i++) if (ANSWER[i] == 0) return 0; return 1; }

function AllowNext() { document.MAIN.NEXT.disabled = false; }

function CheckAnswers() { if (isComplete()) AllowNext(); }

function Next() { location.href = "http://www.msn.com"; }

function SaveAnswers() { SetCookie(COOKIE, ANSWER.join(",")); }

function DeleteAnswers()
{
  for (var i = 0; i < Q.length; i++)
  {
    ANSWER[i] = 0;
    eval("document.MAIN.X"+i+"A.checked = false;");
    eval("document.MAIN.X"+i+"B.checked = false;");
  }
  document.MAIN.NEXT.disabled = true;
  SetCookie(COOKIE, "");
}

</SCRIPT>

【讨论】：

欢迎来到 StackOverflow！此处不赞成仅使用代码的答案，因此最好解释一下这对 OP 有何帮助。