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

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

ただいまの
回答率

90.50%

  • PHP

    20369questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16447questions

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

  • HTML

    8991questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

formのradioボタンで値を2つ取ることはできますか?

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 338

MeB

score 87

 前提・実現したいこと

htmlのformで1つのradioボタンから2つの値を取得したいです。

 該当のソースコード

       <form id="form" name="search" action="">
        <div class="form-list">
          <p></p>
          <input type="radio" id="type01" name="type" value="◯"><label for="type01">◯か□</label>
          <input type="radio" id="type02" name="type" value="△"><label for="type02"></label>
        </div>
        <div class="form-list">
          <p></p>
          <input type="radio" id="color01" name="color" value="青"><label for="color01">赤以外</label>
          <input type="radio" id="color02" name="color" value="赤"><label for="color02"></label>
        </div>
        <button class="submit" value="">条件で絞り込む</button>
      </form>
$(function () {
  $.ajax({
    url: 'test.json',
    type: "POST",
    dataType: "json",
    success: function(data){
      var dataArray = data.test;
      $('button').on('click',function(event){
        event.preventDefault();

        var query = $('input:checked').map(function(){
          var element = ($(this).attr('name')).replace('[]','');
          var obj = {};
          obj[element] = $(this).val();
          return obj;
        }).get();
        if(query == ''){
          query = outputResults(dataArray);
        } else {
          var _query = {};
          for(var i = 0; i <= 4; i++) {
            for(var key in query[i]) {
              _query[key] = query[i][key];
            }
          }
          query = _query;
        }
        var results = _.where(dataArray, query);
        outputResults(results);
        console.log(results);

        var i = $(".button").index(this)
        var p = $(".result").eq(i).offset().top;
        $('html,body').animate({ scrollTop: p }, 'fast');
        return false;
      });

      function outputResults(results){
        var html = '';

        jQuery.each(results, function() {
{
    "test":[
        {
            "type":"◯",
            "color":"赤"
        },
        {
            "type":"◯",
            "color":"青"
        },
        {
            "type":"□",
            "color":"青"
        },
        {
            "type":"□",
            "color":"緑"
        },
        {
            "type":"△",
            "color":"緑"
        }
    ]
}


上記でformからの値を取ってきてjsonの対象のキーで値が同じであればそれを表示それ以外は非表示と言うようにしています。
javascriptのライブラリ「Underscore.js」を使用しています。

 試したこと

調べて見て

<input type="radio" id="type01" name="type" value="◯ □"><label for="type01">◯か□</label>
<input type="radio" id="type01" name="type" value="◯,□"><label for="type01">◯か□</label>


など試して見ましたがうまく取得できませんでした。
値が1つの場合は正常に動いています。
後々は取得できた後にさらにソートさせる予定です。

追記
jsonの中などを追記しました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+1

こうしてみてはどうでしょうか?

$(function(){
  $('[value=check]:button').on('click',function(){
    var t=$(this).closest('form').find('[name=type]:checked');
    if(t.length>0){
      console.log(JSON.parse(t.val()));
    }
  });
});
<form>
<label><input type="radio" name="type" value="[&quot;◯&quot;,&quot;□&quot;]">◯か□</label><br>
<label><input type="radio" name="type" value="[&quot;△&quot;]"></label><br>
<input type="button" value="check">
</form>

※ただしvalueをきっちりJSON型にしないとうまくparseできずにエラーになります

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/25 09:14

    いつもありがとうございます。
    こちらでもうまく取得することができました!

    キャンセル

+1

formのradioボタンで値を2つ取ることはできますか?

辻褄の合わない事になってますね。

HTMLには◯か□というラジオボタンによる選択肢があり、
チェックを入れてvalueにが入ってて、
JSではvalueを抽出してから◯か□を取得したいと言っているわけですよね。

……まぁ、言いたい事はわかります。
真に◯か□というラジオボタンによる選択肢を作ってJSONから情報を抽出したいんですよね?
必要なのはルール決めで、そのルールに従って一貫した仕組みを構築する事です。

それでは実現してみましょうか。
例えば,(カンマ)区切りで複数選択したのと同じ状態を用意します。

<div class="form-list">
  <p></p>
  <input type="radio" id="type01" name="type" value="◯,□"><label for="type01">◯か□</label>
  <input type="radio" id="type02" name="type" value="△"><label for="type02"></label>
</div>

String.prototype.split()を利用しましょう。
このメソッドを実行すると、文字列は配列になります。

// 値がなければ空文字列にする
var value_type = $('[name=type]:checked').val() || '';

// ◯か□選択時
console.log(value_type.split(',')); // ["◯", "□"]
// △選択時
console.log(value_type.split(',')); // ["△"]

var value_types = value_type.split(',');

// 配列から探すならArray.includesを使う
var results = _.chain(dataArray)
  .filter(it => value_types.includes(it.type))
  .value();

【おまけ】初期値と併用

var value_type = $('[name=type]:checked').val() || '';

var all_type = value_type === "";
var value_types = value_type.split(',');

var results = _.chain(dataArray)
  .filter(it => all_type || value_types.includes(it.type))
  .value();

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/25 20:22

    ありがとうございます。
    なにも選択をしていない時に
    Uncaught TypeError: Cannot read property 'split' of undefined
    と出るのですが、先ほど教えていただいた || を使えばよろしいのでしょうか?

    キャンセル

  • 2018/07/25 20:23

    あー、undefinedになるんですね。
    回答調整します。

    キャンセル

  • 2018/07/25 20:24

    初期値をundefinedではなく、カラ文字列になるようにコードを調整しました。

    キャンセル

  • 2018/07/25 20:29

    わざわざありがとうございます。
    'ALL'でやってましたw
    本当にありがとうございます。

    キャンセル

0

htmlのformで1つのradioボタンから2つの値を取得したいです。

じゃなくて、
radioボタンに複数の値をもたせられるように
自分でルールを決めて実装する
と考えましょう。

{
    "test":[
        {
            "type":"◯",
            "color":"赤,青"
        },
        {
            "type":"□",
            "color":"青,緑"
        },
        {
            "type":"△",
            "color":"緑"
        }
    ]
}


な構造に自分で加工してradioボタンに割り当てるってことでいいんじゃないかと察しますが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 17:41

    回答ありがとうございます。
    radioボタンは今のままということでしょうか?
    また、赤のものに青、青のものに緑などはつけたくないです…すみません。
    追記したのですが、後々formからの値で絞り込みをしたデータをソートさせる処理を入れるためjsonのデータを変えることはしたくないと考えています。誤字がありましたので訂正しておきます。

    キャンセル

0

var values = document.getElementById('type01').value.split(',');
console.log(values); //["2", "1"]
上記で取れましたが別の問題がでてきたので、また質問するかもしれません…

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20369questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16447questions

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

  • HTML

    8991questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。