チェックボックスで複数の要素に `this`を使ってプレースホルダを変更する

Question

現在、私は同じクラスを使ってすべてのページに2つの検索入力を持っています。私がしようとしているのは、プレースホルダーのテキストをthisという要素に変更することです。またCodepen

HTML

<nav class="navbar navbar-secondary-scroll-mobile" role="navigation"> 
    <div class="container"> 
    <div class="row"> 
     <div class="search-scroll"> 
     <div class="pull-left"> 
      <input autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text"> 
     </div> 
     <div class="pull-right"> 
      <label> 
      <input class="translateSearch" type="checkbox" checked="checked"> 
      <span>Translate</span> 
      </label> 
     </div> 
     </div> 
    </div> 
    </div> 
</nav> 

JS

$('.translateSearch').on('change', function(e) { 
    if ($(this).is(':checked') == true) { 
    $('.translateSearch').not($(this)).attr('checked', true); 
    } else { 
    $('.translateSearch').not($(this)).attr('checked', false); 
    $('.translateSearch').attr('placeholder', 'Search using exact terms.'); 
    } 
}); 

私はちょうどそれがプレースホルダで動作するように取得するように見える傾けます。何か案は？

Answer 1

次のJSは、テキスト入力のプレースホルダをクラスSearchInputで設定します。元のコードで暗示されているように、代わりにプレースホルダをtranslateSearchのチェックボックスに入れたいと思っていました。また、チェックボックスをオンにすると元のプレースホルダテキストが復元されました。

$('.translateSearch').on('change', function(e) { 
    if ($(this).prop('checked')) { 
    $('.SearchInput').attr('placeholder', 'Have your search terms translated to Chinese.'); 
    } else { 
    $('.SearchInput').attr('placeholder', 'Search using exact terms.'); 
    } 
}); 

また、メモとして - 彼らは、デフォルトで自動的に行われてますが、チェックボックスの動作を手動でする必要はありません。 http://codepen.io/anon/pen/akxxOk

Answer 2

私はわからないのif/else文は、あなたのJSになって何の目的：

はここCodePenへのリンクです。

$('.translateSearch').on('change', function(e) { 
    if ($(this).is(':checked') === false) { 
    $('.SearchInput').attr('placeholder', 'Search using exact terms.'); 
    } 
}); 

Here is an updated Codepen

Answer 3

あなたはのテキストを変更しよう：それはどのelse条件なしに（この場合SearchInputには、適切なクラスでなければならない）プレースホルダを更新して

は、私はそれを簡素化チェックボックスはあなたの入力ではありません。ですから、あなたの入力にIDを追加する場合：[jQueryのを使用して変更プレースホルダテキスト]の

$('.translateSearch').on('change', function(e) { 
 
    if ($(this).is(':checked') == true) { 
 
    $('.translateSearch').not($(this)).attr('checked', true); 
 
    $('#inputToChange').attr('placeholder', "Have your search terms translated to Chinese."); 
 
    } else { 
 
    $('.translateSearch').not($(this)).attr('checked', false); 
 
    $('#inputToChange').attr('placeholder', 'Search using exact terms.'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-secondary-scroll-mobile" role="navigation"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="search-scroll"> 
 
     <div class="pull-left"> 
 
      <input id="inputToChange" autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text"> 
 
     </div> 
 
     <div class="pull-right"> 
 
      <label> 
 
      <input class="translateSearch" type="checkbox" checked="checked"> 
 
      <span>Translate</span> 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>