Писать jquery скрипты динамически

Question

Мне нужно написать сценарии в jQuery для события чекбокса динамически, это мой HTML-код:

<fieldset>
  <label>
                    <input type="checkbox" name="radio0" id="radio0">
                    <img id="img0" src="web_bg.jpg" width="200" height="200"/>
                </label>
  <label>
                    <input type="checkbox" name="radio1" id="radio1">
                    <img id="img1" src="web_bg.jpg" width="200" height="200"/>
                </label>
  <label>
                    <input type="checkbox" name="radio2" id="radio2">
                    <img id="img2" src="web_bg.jpg" width="200" height="200"/>
                </label>
  <label id="label">3</label>
</fieldset>

, и это мой сценарий jQuery, который работает:

  $('#radio0').click(function() {
    if ($(this).is(':checked')) {
      $('#img0').css("opacity", "0.5");
    } else {
      $('#img0').css("opacity", "1");
    }
  });
$('#radio1').click(function() {
  if ($(this).is(':checked')) {
    $('#img1').css("opacity", "0.5");
  } else {
    $('#img1').css("opacity", "1");
  }
});
$('#radio2').click(function() {
  if ($(this).is(':checked')) {
    $('#img2').css("opacity", "0.5");
  } else {
    $('#img2').css("opacity", "1");
  }
});

, но яхочу поместить этот код в пряжку, как это (но это не работает):

var text = $('#label').text();
var max = parseInt(text);
for (var i = 0; i < 3; i++) {
  $('#radio' + i + '').click(function() {
    if ($(this).is(':checked')) {
      $('#img' + i + '').css("opacity", "0.5");
    } else {
      $('#img' + i + '').css("opacity", "1");
    }
  });

Answer 1

Вы должны использовать классы:

$('.radio').click(function() {               // give your radios a class of radio
  var $thisRadio = $(this),                  // get current radio
    $thisImage = $thisRadio.next('.image');  // get corresponding image to the radio (I have given images a class of image)

  if ($thisRadio.is(':checked')) {
    $thisImage.css("opacity", "0.5");
  } else {
    $thisImage.css("opacity", "1");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <label>
      <input type="checkbox" name="radio0" id="radio0" class="radio">
      <img id="img0" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
  </label>
  <label>
      <input type="checkbox" name="radio1" id="radio1" class="radio">
      <img id="img1" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
  </label>
  <label>
      <input type="checkbox" name="radio2" id="radio2" class="radio">
      <img id="img2" src="https://www.fillmurray.com/200/300" width="200" height="200" class="image"/>
  </label>
  <label id="label">3</label>
</fieldset>

Обратите внимание: переключатели в одной группе должны иметь одинаковые имена, в противном случае вы также можете использовать флажок