如何在输入值中转义单引号？

Question

I have an input whose value I want to get when it's checked. It has a single quote in the value.

When I run my JS I get this error in the console:

Uncaught Error: Syntax error, unrecognized expression: .Oiseaux d'eau"

 $('.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

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

when you convert the single quote to html entity the browser will show you a single quote

Answer 2

You could just use JQuery to look for all inputs with type checkbox and then run the each() function.

 $('.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

Fix your name attribute a little, remove subscript [] if not in use:

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

Then this JQuery code will work fine:

// 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

Based on the comments so far it seems that what you are trying to achieve is not really the escaping of an apostrophe but rather the showing and hiding of elements based on checkbox selection. If these dependent elements are children or siblings then you can do this with just CSS. No JS required:

 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>