带有复选框的Textarea占位符

Question

我试图通过按复选框按钮来更改textarea的占位符。我无法让它改变。

要清楚，我试图设置占位符不是一个值。

我的textarea：

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

我的javascript：

<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> 

我特别需要 - 复选框按钮，改变一个textarea的2个不同的选项的占位符。 EX：点击它一次，它说“年龄”，再次点击它说“名称”，再次点击它说“年龄”等。