[0003]Jqueryで値がクリアできず初期値に戻ってしまう現象の解決

クリアボタン押下

無駄にはまったのでメモに残します。

ボタンイベント内にテキストボックスなら$(要素).val('')で空のセット。Checkboxなら$(要素).prop('checked',false)でCheckを外すことができるが、

どちらも効かず、HTML表示時にPHPにてセットした初期値がセットされる謎の現状が起きました。この例の場合はクリアボタン押下時に空にならず「テスト」と表示されます。

Jqueryのバージョンが変わって仕様が変わったのか？コードがミスっているのか？Jqueryの不具合？色々試しましたが、結果はとても簡単なことでした。

ボタンのtypeがresetだったためでした。resetは初期値に戻すため、初期値に「テスト」と入っていて空じゃないので何をセットしても元の初期値に戻ってしまっていました。

              
//HTML内
<input type="text" name="keyword" id="keyword" value="テスト" placeholder="例）ディズニー">
ダメな例↓
<button type="reset" class="btn_clear">クリア
修正後↓
<button type="button" class="btn_clear">クリア

//Jquery
$('.btn_clear').on('click',function(){
	$('.hotel_rank').find('input[type=checkbox]').prop('checked', false);
	$("#keyword").val('');
});