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

Question

前提・実現したいこと

htmlのformで１つの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の中などを追記しました。

Answer 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();

Comments

[MeB]

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

[miyabi-sun]

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

[miyabi-sun]

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

[MeB]

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

Answer 2

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

$(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できずにエラーになります

Comments

[MeB]

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

Answer 3

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

Answer 4

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

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

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

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

Comments

[MeB]

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