Having Issue on Targeting Input with Complex Name

Question

I have a set of checkboxes like this

  <li id="apptax-15">
    <label class="selectit">
      <input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
  </li>

generated by WordPress API now I need to select the chech box by it's name attribute like following but I am getting this error

Syntax error, unrecognized expression: input:checkbox[name=tax_input[apptax][]]

can you please let me know how to fix this

$('input:radio[name=r3]').on('change', function() {
  $('input:checkbox[name=tax_input[apptax][]]').removeAttr('checked');
  console.log('changes happend')

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">

  <li id="apptax-15">
    <label class="selectit">
      <input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
  </li>

  <li id="apptax-17">
    <label class="selectit">
      <input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
  </li>

  <li id="apptax-16">
    <label class="selectit">
      <input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
  </li>
</ul>


<div class="panel-body">

  <label class="checkboxer">
    <input type="radio" name="r3" value="15"> No</label>
  <label class="checkboxer">
    <input type="radio" name="r3" value="17"> Maybe</label>
  <label class="checkboxer">
    <input type="radio" name="r3" value="16"> Yes</label>
</div>

`$('input:checkbox[name="tax_input\\[apptax\\]\\[\\]"]')`. – Tushar Feb 08 '18 at 07:27 — Tushar, Feb 08 '18 at 07:27

score 2 · Answer 1 · answered Feb 08 '18 at 07:27

2

You need to escape the brackets like this:

$('input:checkbox[name=tax_input\\[apptax\\]\\[\\]]').removeAttr('checked');

See working jsfiddle: https://jsfiddle.net/8hw051vu/

answered Feb 08 '18 at 07:27

Igal S.

13,146
5
30
48

score 1 · Answer 2 · answered Feb 08 '18 at 07:27

1

Some characters simply won't work well on css selectors. If you can't avoid using them, then use an id if it's an unique element or create a class if they are expected to be many.

If you are in a hurry use @Ingal S. solution

answered Feb 08 '18 at 07:27

Edorka

1,781
12
24

score 1 · Accepted Answer · answered Feb 08 '18 at 07:29

You can just enclosed the name by "" like $('input:checkbox[name="tax_input[apptax][]"]')

$(document).ready(function(){
 $('input:checkbox[name="tax_input[apptax][]"]').removeAttr('checked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15" checked/> No

score 0 · Answer 4 · answered Feb 08 '18 at 07:28

Select the checkbox by the value of radio button to value of checkbox.

$('input:radio[name=r3]').on('change', function() {

var value = $(this).val()
  $('input:checkbox[value='+value+']').removeAttr('checked');
  console.log('changes happend')

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">

  <li id="apptax-15">
    <label class="selectit">
      <input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
  </li>

  <li id="apptax-17">
    <label class="selectit">
      <input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
  </li>

  <li id="apptax-16">
    <label class="selectit">
      <input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
  </li>
</ul>


<div class="panel-body">

  <label class="checkboxer">
    <input type="radio" name="r3" value="15"> No</label>
  <label class="checkboxer">
    <input type="radio" name="r3" value="17"> Maybe</label>
  <label class="checkboxer">
    <input type="radio" name="r3" value="16"> Yes</label>
</div>

Having Issue on Targeting Input with Complex Name

4 Answers4