Name selector with variables causing syntax problems

时间：2017-07-12 08:15:20

标签： jquery jquery-selectors

Just can't figure this out. I'm sure my loop works OK, but an error lies with the syntax of my name selector and the variables. I've tried all kinds of combinations of square brackets and quote marks. I need to use name as the selector and my objective is for all the checkboxes to be ticked on run.

var TabMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var imonth;
var KEYyear

KEYyear = "2016"


// LOOP CODE from Jan - Dec
for (imonth = 0; imonth < TabMonths.length; imonth++)

{ $('[name ="' + KEYyear + TabMonths[imonth]'"]').prop('checked',true);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mymonths">
<label><input type="checkbox"  name="2016Jan" id="m6b01" /></label>
<label><input type="checkbox"  name="2016Feb" id="m6b02" /></label>
<label><input type="checkbox"  name="2016Mar" id="m6b03" /></label>
<label><input type="checkbox"  name="2016Apr" id="m6b04" /></label>
<label><input type="checkbox"  name="2016May" id="m6b05" /></label>
<label><input type="checkbox"  name="2016Jun" id="m6b06" /></label>
<label><input type="checkbox"  name="2016Jul" id="m6b07" /></label>
<label><input type="checkbox"  name="2016Aug" id="m6b08" /></label>
<label><input type="checkbox"  name="2016Sep" id="m6b09" /></label>
<label><input type="checkbox"  name="2016Oct" id="m6b10" /></label>
<label><input type="checkbox"  name="2016Nov" id="m6b11" /></label>
<label><input type="checkbox"  name="2016Dec" id="m6b12" /></label>
</div>

4 个答案:

答案 0 :(得分：3)

var TabMonths = ["Jan", "Feb", "Mar"];
var imonth;
var KEYyear

KEYyear = "2016"
for (imonth = 0; imonth < TabMonths.length; imonth++)
{ $('[name ="' + KEYyear + TabMonths[imonth]+'"]').prop('checked',true);} // missing + at the end of concat
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mymonths">
<label><input type="checkbox"  name="2016Jan" id="m6b01" /></label>
<label><input type="checkbox"  name="2016Feb" id="m6b02" /></label>
<label><input type="checkbox"  name="2016Mar" id="m6b03" /></label>
</div>

  1. Missing +

答案 1 :(得分：1)

You missed to join (concatenate) the entire expression 

$(document).ready(function(){
var TabMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var imonth;
var KEYyear= "2016";
// LOOP CODE from Jan - Dec
for (imonth = 0; imonth < TabMonths.length; imonth++){
    $('[name *="' + KEYyear+'"]').prop('checked',true);
}

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mymonths">
<label><input type="checkbox"  name="2016Jan" id="m6b01" /></label>
<label><input type="checkbox"  name="2016Feb" id="m6b02" /></label>
<label><input type="checkbox"  name="2016Mar" id="m6b03" /></label>
<label><input type="checkbox"  name="2016Apr" id="m6b04" /></label>
<label><input type="checkbox"  name="2016May" id="m6b05" /></label>
<label><input type="checkbox"  name="2016Jun" id="m6b06" /></label>
<label><input type="checkbox"  name="2016Jul" id="m6b07" /></label>
<label><input type="checkbox"  name="2016Aug" id="m6b08" /></label>
<label><input type="checkbox"  name="2016Sep" id="m6b09" /></label>
<label><input type="checkbox"  name="2016Oct" id="m6b10" /></label>
<label><input type="checkbox"  name="2016Nov" id="m6b11" /></label>
<label><input type="checkbox"  name="2016Dec" id="m6b12" /></label>
</div>

Also you can skip the use of TabMonths and use * to match the substring on the name attribute.

答案 2 :(得分：0)

Here is the working code, there was a small typo. '+' was missing in this line:

$('[name ="' + KEYyear + TabMonths[imonth] + '"]').prop('checked', true);

var TabMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var imonth;
var KEYyear;

KEYyear = "2016";

// LOOP CODE from Jan - Dec
for (imonth = 0; imonth < TabMonths.length; imonth++)

{
  $('[name ="' + KEYyear + TabMonths[imonth] +
    '"]').prop('checked', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mymonths">
  <label>
    <input type="checkbox" name="2016Jan" id="m6b01" />
  </label>
  <label>
    <input type="checkbox" name="2016Feb" id="m6b02" />
  </label>
  <label>
    <input type="checkbox" name="2016Mar" id="m6b03" />
  </label>
  <label>
    <input type="checkbox" name="2016Apr" id="m6b04" />
  </label>
  <label>
    <input type="checkbox" name="2016May" id="m6b05" />
  </label>
  <label>
    <input type="checkbox" name="2016Jun" id="m6b06" />
  </label>
  <label>
    <input type="checkbox" name="2016Jul" id="m6b07" />
  </label>
  <label>
    <input type="checkbox" name="2016Aug" id="m6b08" />
  </label>
  <label>
    <input type="checkbox" name="2016Sep" id="m6b09" />
  </label>
  <label>
    <input type="checkbox" name="2016Oct" id="m6b10" />
  </label>
  <label>
    <input type="checkbox" name="2016Nov" id="m6b11" />
  </label>
  <label>
    <input type="checkbox" name="2016Dec" id="m6b12" />
  </label>
</div>

答案 3 :(得分：0)

这只是使用jQuery .each()迭代器使循环看起来更好的另一种方法。

var TabMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var imonth;
var KEYyear

KEYyear = "2016"


// LOOP CODE from Jan - Dec
$(TabMonths).each(function(){
  
  // this --> current month item
  $('[name ="' + KEYyear + this + '"]').prop('checked',true);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mymonths">
<label><input type="checkbox"  name="2016Jan" id="m6b01" /></label>
<label><input type="checkbox"  name="2016Feb" id="m6b02" /></label>
<label><input type="checkbox"  name="2016Mar" id="m6b03" /></label>
<label><input type="checkbox"  name="2016Apr" id="m6b04" /></label>
<label><input type="checkbox"  name="2016May" id="m6b05" /></label>
<label><input type="checkbox"  name="2016Jun" id="m6b06" /></label>
<label><input type="checkbox"  name="2016Jul" id="m6b07" /></label>
<label><input type="checkbox"  name="2016Aug" id="m6b08" /></label>
<label><input type="checkbox"  name="2016Sep" id="m6b09" /></label>
<label><input type="checkbox"  name="2016Oct" id="m6b10" /></label>
<label><input type="checkbox"  name="2016Nov" id="m6b11" /></label>
<label><input type="checkbox"  name="2016Dec" id="m6b12" /></label>
</div>

相关问题
最新问题