質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2675閲覧

チェックボックスの値が取得できない

ms5025

総合スコア292

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/01/15 06:05

編集2019/01/16 00:20

前提・実現したいこと

addEventListenerのtriggerでクリックイベントを発火させましたが、
チェックボックスの値がうまくとれません。
どのようにすればチェックボックスの値がうまくとれるでしょうか。

既に定義済のclickイベントの前にチェック処理を追加したい

の内容に続いた質問です。

チェックボックスが常にONの状態でしか取得できなくなってしまいました。
ちなみにdocument.addEventListener全てをコメントアウトすれば
(普通の$(document).on('click'だけなら)
チェックボックスのclickイベントでon/off正しく取得できるようです。

発生している問題・エラーメッセージ

クリック前処理

js

1document.addEventListener('click', function (e) { 2 var t = e.target; 3 var node = $(t).parent().parent(); 4 5 // 対象のclassの場合事前チェックを行う 6 if ($(node).hasClass('bootpag')) { 7 e.stopPropagation(); 8 // チェック 9 if (!checkhogehogeItem()) 10 { 11       //チェックfalseの場合click処理しない 12 return; 13 } 14 } 15 16 $(t).trigger('click'); 17}, true);

js

1// チェックボックスボタン押下時 2 $(document).on('click', '.testcheck', function (e) { 3      // 在庫あり 4      console.log($('.testcheck').prop("checked")); 5 } 6 }); 7

html

1 </div> 2 <article class="checkSale"> 3 <div class="form-group form-inline"> 4 <aside class="checkbox-inline"> 5 <label> 6 <input type="checkbox" name="testKbn" class="testKbn" id="testKbn" value="{$results.testKbn}" {if ($results.testKbn==1)}checked{/if} >在庫あり商品表示 7 </label> 8 </aside> 9 </div> 10 </article>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/01/15 08:56

チェックボックスと.bootpagおよびその構造がわかるHTMLを提示下さい
ms5025

2019/01/16 00:21

チェックボックスのhtmlを追加しました .bootpagのクラスnode外に配置してあるチェックボックスとなります。
guest

回答1

0

ベストアンサー

とりあえず

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('.bootpage a').on('click',function(e){ 5 console.log($(this).text()); 6 }); 7}); 8</script> 9<script> 10document.addEventListener('click',function(e){ 11 var t=e.target; 12 if($(t).closest(".bootpage").length>0 && t.nodeName=="A"){ 13 e.preventDefault(); 14 e.stopPropagation(); 15 if($("[name=hoge]").prop("checked")){ 16 console.log("checked"); 17 $(t).trigger('click'); 18 } 19 } 20},true); 21</script> 22<label><input type="checkbox" name="hoge" value="1" checked>hoge</label> 23<p id="demo_top" class="demo_top"> 24<ul class="pagination bootpage"> 25<li data-lp="1" class="firszt"> 26<a href="#"></a> 27</li> 28<li data-lp="2" class="prev"> 29<a href="#">≪前</a> 30</li> 31<li data-lp="1" class=""> 32<a href="#">1</a> 33</li> 34<li data-lp="2" class=""> 35<a href="#">2</a> 36</li> 37<li data-lp="3" class="active"> 38<a href="#">3</a> 39</li> 40<li data-lp="4" class="next"> 41<a href="#">≫次</a> 42</li> 43<li data-lp="78" class="last"> 44<a href="#"></a> 45</li> 46</ul> 47</p> 48<a href="#test">test</a>

投稿2019/01/15 10:21

編集2019/01/16 00:37
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ms5025

2019/01/16 00:34

ありがとうございます。 たとえばデフォルトでONだったチェックボックスをクリックした際 本来ならチェック無し(false)の値が欲しいのですが document.addEventListener内では(true)が取得されます そしてclickのトリガーが起きて、もともとのチェックボックスclickイベントでも trueが取得されてしまいます。 (なので何度チェックボックスをクリックしてもtrueしか取得できない) document.addEventListenerのファンクション自体をコメントアウトして もともとのチェックボックスのクリックイベントが起きる場合は ちゃんとon(true)off(false)が取得できます。 書き方がおかしいのでしょうか?
yambejp

2019/01/16 00:38

微調整しましたが、.bootpage外のチェックボックスなら干渉しないので 普通に.bootpage aをクリックするときにtrue/falseを得られます こちらが例示したソースのとおりではないのでしょうか?
ms5025

2019/01/16 00:44

すいません!$(t).trigger('click');の位置がif文の中なのですね! 見落としていました。 うまくいきました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問