選択後のチェックボックスラベルの変更

Question

選択入力に基づいてラベルを変更するチェックボックス（101）があります。 JS私は論理的に1つのみ実行されています。私はjquery関数にはあまり慣れていませんが、101個のチェックボックスすべてをどのように進めるべきかはわかりません。

入力：

<?php 

    for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want 
     echo '<div class="each_checkboxes">'; 
     // $j = sprintf('%04u', $i); 

     echo '<label id="contact" for="checkbox"></label>'; 
     echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>'; 

     echo '</div>'; 

    endfor; 
?> 

選択：

<select id="method" name="server" class="custom-dropdown__select custom-dropdown__select--white" required> 
    <option value="0" default>Choose server</option> 
    <option value="server1">server 1</option> 
    <option value="server2">server 2</option> 
</select> 

JS：

$(document).ready(function() { 
    $('#method').change(function() { 
     var method = $('option:selected').val(); 

     if (method == "server1") { 

      $('#contact').text("MA" + i); 

     } else if (method == "server2") { 

       $('#contact').text("SAS" + i); 

     } 
    }); 

}); 

Answer 1

あなたはidは、それぞれに固有のものでなければならないので、class代わりのidを使用する必要があります素子。次のようにしてください。

PHP：

<?php 
    for ($i = 1; $i < 102; $i++): 

     echo '<div class="each_checkboxes">'; 

     echo '<label class="contact" for="checkbox'.$i.'"></label>'; 
     echo '<input type="checkbox" name="tape[]" id="checkbox'.$i.'" value=""/>'; 

     echo '</div>'; 

    endfor; 
?> 

のjQuery：

$(document).ready(function() { 
    $('#method').change(function() { 
     var method = $('option:selected').val(), 
      text = ""; 

     if (method == "server1") { 
      text = "MA"; 
     } else if (method == "server2") { 
      text = "SAS"; 
     } 

     $('.contact').each(function (i) { 
      var value = text + (++i); 
      $(this).text(value); 
      $('#' + $(this).attr('for')).val(value); 
     }); 
    }); 
}); 

Answer 2

あなただけが割り当てる必要があり、あなたのDOMに最初のマッチを探しますあなたのjQueryのセレクタでid属性に参​​照されていますあなたのラベルにクラスを追加し、ラベルテキストを変更するときにこれを参照すると、これは機能します。

<?php 

    for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want 
     echo '<div class="each_checkboxes">'; 
    // $j = sprintf('%04u', $i); 

     echo '<label id="contact" class="contact" for="checkbox"></label>'; 
     echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>'; 

     echo '</div>'; 

endfor; 
    ?> 

とjQueryでちょうどこのようなクラスセレクタを使用します。

$(document).ready(function() { 
    $('#method').change(
    function() { 
     var method = $('option:selected').val(); 

     if (method == "server1") { 

      $('.contact').text("MA" + i); 

     } else if (method == "server2") { 

       $('.contact').text("SAS" + i); 

     } 
    }); 

}); 

これだけです。代わりに、IDの

Answer 3

使用ラベルクラスは

<?php 

    for ($i = 1; $i < 102; $i++): //adjust this number to whatever number of checkboxes you want 
     echo '<div class="each_checkboxes">'; 
    // $j = sprintf('%04u', $i); 

     echo '<label class="contact" for="checkbox"></label>'; 
     echo '<input type="checkbox" name="tape[]" id="checkbox" value=""/>'; 

     echo '</div>'; 

endfor; 
    ?> 

jsのコードは

$(document).ready(function() { 
    $('#method').change(
    function() { 
     var method = $('option:selected',this).val(); 

     if (method == "server1") { 

      $('.each_checkboxes label.contact').html("MA" + i); 

     } else if (method == "server2") { 

       $('.each_checkboxes label.contact').html("SAS" + i); 

     } 
    }); 

}); 

Answer 4

使用あなたのチェックボックスのラベルのための "クラス" の代わりに "ID" です。基本的に、要素の "id"は一意でなければなりません。しかし、クラス、複数の要素が同じクラスを持つことができます。

ので、ラベルは次のようにする必要があります：

<label class="contact" for="checkbox"></label> 

その後、あなたのonchange方法は次のようにする必要があります：

$('#method').change(
    function() { 
     var method = $('option:selected').val(); 
     if (method == "server1") { 
     $('.contact').text("MA" + i); 
     } else if (method == "server2") { 
     $('.contact').text("SAS" + i); 
     } 
});