javascript - 如何根据在同一问题中选择的选项隐藏/取消隐藏选项

Question

我目前正在使用以下代码来帮助我隐藏和显示选择。但是如果未选中选项 1，我将无法隐藏和取消选择它们。

var x= jQuery("#"+this.questionId+" input[choiceid=2]").closest("li").hide();

var y = jQuery("#"+this.questionId+" input[choiceid=3]").closest("li").hide();



this.questionclick = function(event, element) {

    var selectedChoice = this.getSelectedChoices()



    console.log(selectedChoice) //use this to get the value of the choice when you want the textbox to appear

    if (selectedChoice == "1") {

      x.show();

y.show();

alert(selectedChoice);

    }

    else if (selectedChoice == "2") {

      //x.hide();

//y.hide();

alert(selectedChoice+"Else if");

    }

else{

x.hide();

y.hide();

alert(selectedChoice+"Else ");

}

  }

一些帮助将不胜感激

标签： javascriptjqueryqualtrics

Answer 1

您的问题不包含您正在使用的 html。这是我创建的一个小演示，用于grouped checkboxes演示binding它们click event。根据您的需要进行游戏和更改。

https://stackblitz.com/edit/grouped-checkboxes-binding-onclick-function

this函数内的关键字是指单击的复选框。您可以像对普通 html 复选框元素一样进行进一步检查。egthis.checked表示document.getElementById("myCheck").checked检查复选框是否被选中。

HTML

<div class="question">
  <h2 class="q-1">Click to write the Question text</h2>
</div>
<ul class="options-list" id="options-list">
  <li>
    <label>
    <input type="checkbox" id="q1-opt1" name="q1['opt1']">
    Click to write choice 1
    </label>
  </li>
  <li>
    <label>
    <input type="checkbox" id="q1-opt2" name="q1['opt2']">
    Click to write choice 2
    </label>
  </li>
  <li>
    <label>
    <input type="checkbox" id="q1-opt3" name="q1['opt3']">
    Click to write choice 3
    </label>
  </li>
  <li>
    <label>
    <input type="checkbox" id="q1-opt4" name="q1['opt4']">
    Click to write choice 4
    </label>
  </li>
</ul>

CSS

.options-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.options-list li label {
  display: block;
  background: #ddd;
  border-radius: 8px;
  padding: 10px 20px;
  margin: 0 0 10px;
  cursor: pointer;
}
.options-list li label:hover {
  background: #ccc;
}
.options-list li label > input {
  display: none;
}

JS

(function() {
  // get questions that you want to disable enable
  var q1opt1 = document.getElementById("q1-opt2");
  var q1opt2 = document.getElementById("q1-opt3");

  // get list wrapping element of all checkboxes
  var el = document.getElementById('options-list');
  // get all checkboxes inside wrapping element
  var options = el.getElementsByTagName('input');
  // assign a function each checkbox on click
  for( var i=0, len=options.length; i<len; i++ ) {
    if ( options[i].type === 'checkbox' ) {
        options[i].onclick = function(e) {
          // if checkbox id is q1-opt1
          // and is checked is checking if this is selected.
          // checkbox is hidden with css
          // play with the code
          if ( this.id == 'q1-opt1' && this.checked ) {
            q1opt1.parentElement.style.display = "none";
            q1opt2.parentElement.style.display = "none";
          } else {
            q1opt1.parentElement.style.display = "block";
            q1opt2.parentElement.style.display = "block";
          }
        }
    }
  }
})();