Как избежать одиночной кавычки во входном значении?

Question

У меня есть input, значение которого я хочу получить при его проверке.У него есть одиночная кавычка в значении.

Когда я запускаю свой JS, я получаю эту ошибку в консоли:

Uncaught Error: синтаксическая ошибка, нераспознанное выражение: .Oiseaux d 'ух "

$('.group_oiseau').on('change', function() {
  /*var group_oiseau = $('input[type=checkbox][name=group_oiseau]:checked').attr('value');*/

  $("." + $(this).find('input').val()).each(function() {
    if ($(this).hasClass('hidden')) {
      $(this).removeClass('hidden');
      console.log($(this).hasClass('hidden'));
    } else {
      $(this).addClass('hidden');
      console.log($(this).hasClass('hidden'));
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox group_oiseau">
  <input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau[]" required>
  Oiseaux d'eau
  <div class="checkbox-cust"></div>
</label>

Answer 1

Судя по комментариям, кажется, что вы пытаетесь достичь не избавления от апострофа, а показа и скрытия элементов, основанных на выборе флажка.Если эти зависимые элементы являются дочерними или родными, то вы можете сделать это только с помощью CSS.JS не требуется:

label {display:inline-block; border:1px dotted grey; vertical-align:top;}
.checkbox-cust {display:none;}
input[type='checkbox']:checked ~ .checkbox-cust {display:block;}

<label class="checkbox group_oiseau">
     <input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau[]" required>
        Oiseaux d'eau
     <div class="checkbox-cust">custom stuff 1</div>
 </label>
 <label class="checkbox group_2">
     <input type="checkbox"  class="grey checkbox" value="test" name="test" required>
        test
     <div class="checkbox-cust">custom stuff 2</div>
 </label>

Answer 2

Вы можете просто использовать JQuery для поиска всех inputs с типом checkbox и затем запустить функцию each().

$('.group_oiseau').on('change', function() {
  /*var group_oiseau = $('input[type=checkbox][name=group_oiseau]:checked').attr('value');*/

$.each($('input[type=checkbox]'),function(){
    if ($(this).hasClass('hidden')) {
      $(this).removeClass('hidden');
      console.log($(this).hasClass('hidden'));
    } else {
      $(this).addClass('hidden');
      console.log($(this).hasClass('hidden'));
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox group_oiseau">
  <input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau[]" required>
  Oiseaux d'eau
  <div class="checkbox-cust"></div>
</label>

Answer 3

Немного исправьте свой атрибут name, удалите индекс [], если он не используется:

<input type="checkbox"  class="grey checkbox" value="Oiseaux d'eau" name="group_oiseau" required>

Тогда этот код JQuery будет работать нормально:

// Get value of radio which is checked
var value = $('input[name=group_oiseau]:checked').val();

// Print that value in the console
console.log(value);

Answer 4

let value = "Oiseaux d'eau";
String(value).replace(/'/g,'"');

при преобразовании одинарной кавычки в HTML-сущность браузер покажет вам одинарную кавычку