復選框jquery - 多個條件

Question

我在使用 JQuery 使復選框更改某些 HTML 時遇到問題。

我有一個帶有以下標簽的標准 html 復選框

<input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq">
<input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN11" id="3mcq">
<input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN12" id="3mcq"> 

我試圖然后使用 JQuery 根據用戶勾選兩個正確的選項來更改一些 HTML。 我正在使用 value="" 鍵來選擇正確/錯誤的答案

$(function () {

 ($('input[value=AQN12]:checked').val())) 

            $("input[name=AQN1]:checkbox").click(function () {

                    if ( $('input[value=AQN10]:checked').val() && $('input[value=AQN12]:checked').val() ) {
                            document.getElementById("CA1").innerHTML = "this is right";
                    } 

                    else {
                        document.getElementById("CA1").innerHTML = "this is wrong";
                    }
            });
        });

以下是僅滿足一個條件的復選框函數的示例。 (AQN10)

$(function () {
            $("input[name=AQN1]:checkbox").click(function () {

                    if ($('input[value= AQN10]:checked').val()) {

                        document.getElementById("CA2").innerHTML = "this is right";
                    } 

                    else {
                        document.getElementById("CA2").innerHTML = "this is wrong";
                    }
            });
        });

我想嘗試得到它，這樣我就可以使用邏輯運算符 && 或 'or' 這樣，如果用戶選擇一個正確的答案，他們會得到一種“正確的！...”答案，當他們選擇所有正確的答案時他們得到了完整的正確答案。

謝謝！..

Answer 1

您有多個具有相同 ID 的復選框，請嘗試像這樣重命名它們：

<input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq">
<input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN11" id="3mcq1">
<input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN12" id="3mcq2">

現在你可以參考

$('input[value=AQN12]:checked').val())) 

            $("input[name=AQN1]:checkbox").click(function () {

                    if ( $('#3mcq1:checked').val() && $('#3mcq2:checked:checked').val() ) {
                            document.getElementById("CA1").innerHTML = "this is right";
                    } 

                    else {
                        document.getElementById("CA1").innerHTML = "this is wrong";
                    }
            });

Answer 2

首先，元素的id屬性應該是唯一的，這不會影響功能（在本例中），但這是一個很好的做法。

然后我會查看您的元素命名，因為復選框是分開的，我會刪除value屬性並將其替換為name 。 這可以讓您更清楚地定位到哪個復選框。

我附上了一個包含這些要點的片段，並希望提供一個易於理解的更流暢的工作流程

 $(function(){ /* input that have type=checkbox and class=Q1 */ $('input[type="checkbox"].Q1').click(function(){ checkQ1(); }); function checkQ1(){ /* store the checked state of each Q1 checkbox */ var cb0_checked = $('input[name="AQN10"]').prop('checked'), cb1_checked = $('input[name="AQN11"]').prop('checked'), cb2_checked = $('input[name="AQN12"]').prop('checked'); /* check if cb0 and cb2 are checked */ if(cb0_checked && cb2_checked){ $('#CA1').html('This is right'); return; } /* NOTE: this will return "This is right" even if all 3 are checked - an alternative would be: * if(cb0_checked && cb2_checked && !cb1_checked){ */ /* check if either cb0 or cb2 are checked */ if(cb0_checked || cb2_checked){ $('#CA1').html('This is almost right'); return; } /* neither are checked */ $('#CA1').html('This is wrong'); } });

 <!-- You don't need this line - just including jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="AQN10" class="checkbox Q1"><br> <input type="checkbox" name="AQN11" class="checkbox Q1"><br> <input type="checkbox" name="AQN12" class="checkbox Q1"><br> <span id="CA1"></span>