javascript - 如何在 JQuery 测试中“选中”复选框

Question

我正在测试一个功能，当复选框被“选中”时，该功能将 div 的显示从“无”更改为“阻止”。该代码在网站上运行，我对通过的同一段代码进行了另一次测试（Javascript 检查复选框是否在页面加载时“选中”。如果没有，它将 div 更改为“无”）。

考试：

QUnit.test("optional fields visible when checkbox selected", function (assert) {
      assert.equal($('#optional_fields').css('display'), 'none');
      $('#id_taken_test_before').prop('checked', true);
      assert.equal($('#optional_fields').css('display'), 'block');
    });

相关的html代码：

<div class="form-group">
      <div id="div_id_taken_test_before" class="custom-control custom-checkbox">
        <input type="checkbox" name="taken_test_before" class="checkboxinput custom-control-input" 
        id="id_taken_test_before">
        <label for="id_taken_test_before" class="custom-control-label">Have you taken the test 
        before</label>
      </div>
    </div>

以及相关的 javascript 代码：

$("#div_id_taken_test_before").change(function(){
    var questions = document.getElementById("optional_fields");

    if($('#id_taken_test_before').is(':checked')){
       questions.style.display = "block";
    }else{
        questions.style.display = "none";
    }
});

我正在尝试“检查”复选框，然后它应该触发我的 javascript 并将“可选字段”div 更改为“阻止”。

:checked 事件永远不会触发。我尝试了很多东西-

(div_id_taken_test_before').prop...
.click()

等，但只是无法将此复选框更改为“已选中”。

谢谢你。

标签： javascriptjqueryqunit