2017-12-31 275 views
1

私はチェックボックスの束を持っています。私はそれらから値を取得し、それをスパンと隠れた入力に渡したいと思います。 1つのチェックボックスをクリックすると正常に動作します。しかし、複数のチェックボックスをクリックすると、最後の値だけが渡されます。どうしましたか?それで私を助けてください。そして他の質問。複数の値を格納するためにinputまたはtextareaを使用するのは適切ですか?jQueryがマップ関数から入力とスパンにデータを渡す

function t() { 
 
     $('input[type="checkbox"]:checked').map(function(){ 
 
      var dataAttr = $(this).attr('name'); 
 
      var dataAttrVal = $(this).val(); 
 
      $('input[name="' + dataAttr + '-value"]').val(dataAttrVal); 
 
      $('#summary_' + dataAttr).html(dataAttrVal); 
 
      console.log(dataAttr); 
 
      console.log(dataAttrVal); 
 
     }).get().join(); 
 
    }; 
 

 
    $('input[type="checkbox"]').on('click', function(){ 
 
     t(); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="sause" id="sause-garlic" value="Sos czosnkowy" class="sause">       
 
           <label for="sause-garlic">garlic</label> 
 
           <input type="checkbox" name="sause" id="sause-tabasco" value="Sos tabasco" class="sause">       
 
           <label for="sause-tabasco">tabasco</label>        
 
<br> 
 
           <input type="checkbox" name="vegies" id="vegies-tomato" value="Tomato" class="vegies">       
 
           <label for="vegies-tomato">tomato</label> 
 

 
           <input type="checkbox" name="vegies" id="vegies-tomato" value="potato" class="vegies">       
 
           <label for="vegies-tomato">potato</label> 
 

 

 
<input type="text" name="sause-value"> 
 
<input type="text" name="vegies-value">      
 

 
<span id="summary_sause" class="summary"></span> 
 
    <span id="summary_vegies" class="summary"></span>

答えて

1

あなたは基本的にそこにあるすべてのものを上書きしている.html()メソッドを使用します。

$('#summary_' + dataAttr).append(dataAttrVal); 

これが答えあなたの質問に:あなたは既存の値に追加する.append()メソッドを使用することができ、また

var s = $('#summary_' + dataAttr); 
s.html(s.html() + dataAttrVal); 

$('#summary_' + dataAttr).html(dataAttrVal); 

付:あなたはラインを置き換えることができますしかし、修正する必要のある他の多くの問題がコード内にあります。私はあなた自身でそれらを探索させ、いくつかの困難に直面した場合は、新しい回答を投稿し、私たちはあなたを助けます。

2番目の質問:複数の値を格納するのにinputまたはtextareaを使用するのは適切ですか?一般的に、それは良い考えではありませんが、いくつかのシナリオでは問題ありません。良いアドバイスをするためには、正確なシナリオと要件を知る必要があります。

+0

私はチェックボックス付きのフォームを持っています。私は自分のフォームに隠れた入力に値を渡し、次にフォームを渡したいと思います。私のコードではどのような問題がありましたか? – MMPL1

+0

私があなたに与えたオプションの1つを選択し、コードを更新して実行して、それがうまく動作するかどうかを確認します。あなたが違った振る舞いをしたいことを見つけたら、それが問題です。それらを修正しようとするといくつかの困難に直面した場合は、それらを新しい質問に投稿し、私たちはあなたを助けます。 –

+0

私は参照してください。しかし、あなたのコードは完璧に動作します!おそらく、修正するべきことが1つあります。データをテクサリアに渡すこともありますが、私はそれを自分で修正できると思います。ありがとうございます – MMPL1

関連する問題