帶有復選框的文本區域占位符

Question

我試圖通過按下復選框按鈕來更改文本區域的占位符。 我只是無法改變它。

明確地說，我試圖設置一個占位符而不是一個值。

我的文本區域：

<textarea name="problem" id="problem" rows="3" class="form-control" cols="45" placeholder="Describe your ticket reason in as few words as possible."></textarea>

我的腳本：

<div class="onoffswitch">
  <input type="checkbox" onchange="changeplh()" name="onoffswitch" class="onoffswitch-checkbox" value="1" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
  <script>
    function changeplh() {
      debugger;
      var sel = document.getElementById("myonoffswitch");
      var textbx = document.getElementById("problem");
      var indexe = sel.selectedIndex;

      if (indexe == 0) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "age");

      }
      if (indexe == 1) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "name");
      }
    }
  </script>
</div>

我特別需要的 - 一個復選框按鈕，可將文本區域的占位符更改為 2 個不同的選項。 例如：單擊一次，它顯示“年齡”，再次單擊它顯示“姓名”，再次單擊它顯示“年齡”等。

Answer 1

您的代碼有點亂（例如，您的代碼中沒有#problem ）所以我只是創建了一個更改placeholder的簡單演示。

 $('#problem').change(function() { $('textarea').attr('placeholder', $(this).is(':checked')? 'name': 'age'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea class="form-control" style="height:150px" name="techProblem" placeholder="Describe the issue in as few words as possible."></textarea> <label><input type="checkbox" id="problem" /> Change placeholder</label>