初めて投稿させていただきます。
内容としては「チェックボックス」による複数回答の中から「ラジオボタン」による単一解答のフォームを作成したく考えております。フォームとしては不動産の営業の来場者向けアンケートで「今まで見たことのある項目」を複数回答
↓
「一番最初に見たものはどれですか？」を単一解答で「今まで見たことのある項目」のみが表示されるラジオボタンで表示できればと考えております。
別サービスであるクエスタントでは実装できるようです。https://help.questant.jp/hc/ja/articles/360000284581-%E9%81%B8%E6%8A%9E%E8%82%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%9D%A1%E4%BB%B6%E3%82%92%E8%A8%AD%E5%AE%9A
しかし、クエスタントではフォーム入力内容をkintoneへ反映させることが出来ずデータ連携を優先させフォームブリッジにて再現を試行錯誤しておりJavascriptコードなど幅広く解決策をいただければと藁にもすがる思いで投稿させていただきました。。
表題の件について会社で導入するにあたりトヨクモ様へご相談させていただきましたが標準機能ではフィールド全体の表示/非表示のみでカスタマイズ対応で返答がきております。
Javascriptを独学で学習しておりますが、データの受け渡しが未だ理解不足な点あるためまだ自分でコードは書いておりません。
フィールドコードは
「今まで見たことのある項目」
広告媒体_web
広告媒体_他
「一番最初に見たものはどれですか？」
認知媒体
です。（お恥ずかしながらkintoneのデータベース作業上日本語のフィールドコードになっております。）
よろしくお願いいたします。
harazonoさん
こんにちは。
チェックボックスで選択された値のみから構成されるラジオボタンを作るということで合ってますでしょうか。
下記のようなコードでラジオボタンの中身を変えることができます。
JavaScript独学中とのことで、ぜひコードを読み解いてみてください。
FormBridgeのイベントについては、下記ご参照ください。
https://formbridge.kintoneapp.com/help/customize
(function() {
'use strict';
function setRadio(state) {
let checkbox = [];
// チェックボックスを結合
checkbox = state.record.広告媒体_web.value.concat(state.record.広告媒体_他.value);
// チェックボックスで選択された値にラジオボタンの値が含まれなければ、ラジオボタンを初期化
if (checkbox.indexOf(state.record.認知媒体.value) == -1) {
state.record.認知媒体.value = '';
}
let el = fb.getElementByCode('認知媒体').getElementsByClassName('field');
// チェックボックスで選択されていない値はラジオボタンで非表示、選択されている値は表示
for (let i = 0; i < el.length; i++) {
if (checkbox.indexOf(el[i].innerText.trim()) == -1) {
el[i].style.display = 'none';
} else {
el[i].style.display = '';
}
}
return state;
}
fb.events.fields.広告媒体_web.changed = [function(state) {
setRadio(state);
return state;
}];
fb.events.fields.広告媒体_他.changed = [function(state) {
setRadio(state);
return state;
}];
fb.events.form.mounted = [function(state) {
setRadio(state);
return state;
}];
})();
koichi様
ご回答ありがとうございました。
チェックボックスで選択された値のみから構成されるラジオボタンを作るということで合っており無事実装出来ました！
つたない文章にもかかわらず意図をくみ取って頂きありがとうございます。
コードもとてもシンプルにまとめて頂いており、分かりやすかったです。
concatやindexOfなどの関数は初見でしたので勉強になりました。
harazonoさん
解決されたようで良かったです！
concatやindexOfは、配列処理では頻出ですので、ぜひ使ってみてください。
koichi様
以前は助けて頂きましてありがとうございました。
あれから問題なく動作はしているのですが、ふとしたタイミングで検証ツール起動しておりましたらエラーが出ておりました。
動作は問題ないのでそのままでもいいかと思いましたが、もし解決策ございましたらご教授頂ければ幸いです。
記述から恐らくステップフォームで別ページにあるチェックボックスのデータが一枚目のフォームでは入っていないため、nullで出てしまっているエラーかと考えましたがステップフォームの順番自体は変えられないためどうしようもないものかと思いました。
harazonoさん
if (fb.getElementByCode(‘認知媒体’)) で「認知媒体」フィールドが現在の画面に存在するかを判定し
存在すれば処理するという形にすればエラーはなくなります。
if (fb.getElementByCode('認知媒体')) {
let el = fb.getElementByCode('認知媒体').getElementsByClassName('field');
// チェックボックスで選択されていない値はラジオボタンで非表示、選択されている値は表示
for (let i = 0; i < el.length; i++) {
if (checkbox.indexOf(el[i].innerText.trim()) == -1) {
el[i].style.display = 'none';
} else {
el[i].style.display = '';
}
}
}
ただ、ステップ2以降に「認知媒体」があると思いますので
恐らく「認知媒体」の選択肢が全て表示された初期状態になっていますよね？
もし、初期状態をどの選択肢も表示しないのであれば、もう一つ修正が必要です。
ステップが切り替わったタイミングで、毎回setRadioを呼び出すようにします。
以下のようにMutationObserverを使い、ステップ上部バーの要素を監視し、要素が変わったタイミング（ステップが変わったタイミング）でsetRadioが実行されます。
fb.events.form.mounted = [function(state) {
// ステップ上部バーの要素を監視（ステップの移動があれば処理が走る）
const target = document.getElementsByClassName('el-steps el-steps--horizontal')[0];
// ノードに変化があれば実行
const observer = new MutationObserver(function() {
setRadio(state);
});
const config = { childList: true, subtree: true }; // 監視を指定するオプション
observer.observe(target, config); // 監視開始
return state;
}];
koichi 様
ご返信大変遅くなり申し訳ございません。
ご指摘いただきましたコードにて無事エラーが解消されました！
何度も稚拙な質問に対しご丁寧に対応頂き感謝しかありません。
ありがとうございました。
system
(system)
クローズされました:
8
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。