jqueryを使用してチェックボックスの状態を確認します。

Question

各曜日に1つずつチェックボックスがあります。私は選択されているunsig Jqueryをチェックし、選択された項目の値すべてをラベルに書き込む必要があります。 私は別の方法を試みましたが、どれもうまくいきませんでした。ここで チェックボックス

<div class="row"> 
    <div class="col-md-12"> 
     <div id="format"> 
      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="checkLunedi" class="lunedi1 giornoSettimana" value="lunedi"> 
       <label for="checkLunedi" class="cella">LUNEDI</label> 
      </div> 
      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="ceckMartedi" class="giornoSettimana" value="martedi"> 
       <label for="ceckMartedi" class="cella">MARTEDI</label> 
      </div> 
      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="checkMercoledi" class="giornoSettimana" value="mercoledi"> 
       <label for="checkMercoledi" class="cella">MERCOLEDI</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="checkGiovedi" class="giornoSettimana" value="giovedi"> 
       <label for="checkGiovedi" class="cella">GIOVEDI</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="checkVenerdi" class="giornoSettimana" value="venerdi"> 
       <label for="checkVenerdi" class="cella">VENERDI</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="checkSabato" class="giornoSettimana" value="sabato"> 
       <label for="checkSabato" class="cella">SABATO</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" id="checkDomenica" class="giornoSettimana" value="domenica"> 
       <label for="checkDomenica" class="cella">DOMENICA</label> 
      </div> 
     </div> 
    </div> 
</div> 

ためのコードである誰かが私を助けることができますか？

$(document).ready(function() { 
 
    $('#test').click(function() { 
 
    alert($('#check').prop('checked')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="check"> 
 
<input type="button" id="test" value="Is that checked?">

注：

Answer 1

チェックボックスにイベントリスナーを追加し、チェックボックスの状態が変更されている場合は、​​を使用してチェックすることができます。

var label = $('#daysSelected'); 
 
//listening to click events 
 
$('input:checkbox').on('click', function(){ 
 
    var labels = []; 
 
    //looping over all the checkboxes 
 
    $('input:checkbox').each(function(){ 
 
    var checkbox = $(this); 
 
    if(checkbox.is(':checked')){ 
 
     //storing the selected labels of respective checkboxes 
 
     labels.push(checkbox.next('label').html()); 
 
    } 
 
    }); 
 
    label.html(labels.join(', ')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="row"> 
 
      <div class="col-md-12"> 
 
       <div id="format" > 
 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="checkLunedi" class="lunedi1 giornoSettimana" value="lunedi"> 
 
         <label for="checkLunedi" class="cella">LUNEDI</label> 
 
        </div> 
 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="ceckMartedi" class="giornoSettimana" value="martedi"> 
 
         <label for="ceckMartedi" class="cella">MARTEDI</label> 
 
        </div> 
 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="checkMercoledi" class="giornoSettimana"value="mercoledi"> 
 
         <label for="checkMercoledi" class="cella">MERCOLEDI</label> 
 
        </div> 
 

 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="checkGiovedi" class="giornoSettimana"value="giovedi"> 
 
         <label for="checkGiovedi" class="cella">GIOVEDI</label> 
 
        </div> 
 

 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="checkVenerdi" class="giornoSettimana" value="venerdi"> 
 
         <label for="checkVenerdi" class="cella">VENERDI</label> 
 
        </div> 
 

 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="checkSabato" class="giornoSettimana" value="sabato"> 
 
         <label for="checkSabato" class="cella">SABATO</label> 
 
        </div> 
 

 
        <div class="col-md-1 col-centered celleSettimana"> 
 
         <input type="checkbox" id="checkDomenica" class="giornoSettimana" value="domenica"> 
 
         <label for="checkDomenica" class="cella">DOMENICA</label> 
 
        </div> 
 
       </div> 
 
      </div> 
 
    <p id="daysSelected"></p> 
 
    </div>

Answer 2

は、チェックボックスがチェックされているかどうかをテストするために、このサンプルコードを試してみてください。このコードはjQueryのを使用していますので、あなたのHTMLファイルに含めるようにしてください。

Answer 3

私は遅刻したが Fiddleをこれをチェックしてみてください。

var $inputCheckBoxes = $('input[type="checkbox"]'); 
$inputCheckBoxes.on("change", function(){ 
    $("#checked-inputs-container > span").remove(); 
    $.each($inputCheckBoxes, function(index, element) { 
     var isChecked = $(element).prop("checked"); 
     if (isChecked) { 
      $("#checked-inputs-container").append('<span>' + $(element).val() + '</span>'); 
     } 
    }); 
}); 

Answer 4

これを試してください。完全なコード任意のボタンをクリックするとリストが表示されるようにしたい場合。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function(){ 
      var favorite = []; 
      $.each($("input[name='day']:checked"), function(){    
       favorite.push($(this).val()); 
      }); 
      favorite = favorite.join(", "); 
      $('#result').html("Selected value are:"+favorite); 
      //alert("My favourite days are: " + favorite.join(", ")); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div id="format"> 
      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="lunedi1 giornoSettimana" value="lunedi"> 
       <label for="checkLunedi" class="cella">LUNEDI</label> 
      </div> 
      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="giornoSettimana" value="martedi"> 
       <label for="ceckMartedi" class="cella">MARTEDI</label> 
      </div> 
      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="giornoSettimana" value="mercoledi"> 
       <label for="checkMercoledi" class="cella">MERCOLEDI</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="giornoSettimana" value="giovedi"> 
       <label for="checkGiovedi" class="cella">GIOVEDI</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="giornoSettimana" value="venerdi"> 
       <label for="checkVenerdi" class="cella">VENERDI</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="giornoSettimana" value="sabato"> 
       <label for="checkSabato" class="cella">SABATO</label> 
      </div> 

      <div class="col-md-1 col-centered celleSettimana"> 
       <input type="checkbox" name="day" class="giornoSettimana" value="domenica"> 
       <label for="checkDomenica" class="cella">DOMENICA</label> 
      </div> 

      <button type="button">Get Values</button> 

      <p id="result"></p> 
     </div> 
    </div> 
</div>