嵌套的'if checkbox is checkbox‘引发错误

Question

每当选中/取消选中任何复选框时，我都需要修改一个字符串，但只有第一个复选框在其他人抛出异常错误“"#two-stars".is is not a function”时执行此工作。我尝试过不同的情况，但似乎这段代码的核心出了问题，我还没能找到。代码：

$('#input:checkbox').change(function(){

        starsQueries = '';
        if( $('#two-stars').is(':checked') ){
            starsQueries += '&stars=401';
            console.log('checked!');
        }
        if( $('#three-stars').is(':checked') ){
            if( ('#two-stars').is(':checked') ){
                starsQueries += ',402';
            } else {
                starsQueries += '&stars=402';
            }
        }
        if( $('#four-stars').is(':checked') ){
            if( ('#three-stars').is(':checked') || ('#two-stars').is(':checked') ){
                starsQueries += ',403';
            } else {
                starsQueries += '&stars=403';
            }
        }
        if( $('#five-stars').is(':checked') ){
            if( ('#four-stars').is(':checked') || ('#three-stars').is(':checked') || ('#two-stars').is(':checked') ){
                starsQueries += ',404';
            } else {
                starsQueries += '&stars=404';
            }
        }
});

在JSfiddle上：https://jsfiddle.net/4mLcz6mt/1/

Answer 1

您在('#two-stars')、('#three-stars')和('#four-stars')前面省略了$

检查https://jsfiddle.net/4mLcz6mt/1/

Answer 2

您在五个地方缺少jQuery object $。JQuery始终需要$才能正常运行。

​

$('input:checkbox').change(function(){
		
starsQueries = '';
if( $('#two-stars').is(':checked') ){
  starsQueries += '&stars=401';
  console.log('checked!');
  $('#test').append('2* checked<br>');
}
if( $('#three-stars').is(':checked') ){
  if( $('#two-stars').is(':checked') ){
    starsQueries += ',402';
  } else {
    starsQueries += '&stars=402';
  }
  $('#test').append('3* checked<br>');
}
if( $('#four-stars').is(':checked') ){
  if( $('#three-stars').is(':checked') || $('#two-stars').is(':checked') ){
    starsQueries += ',403';
  } else {
    starsQueries += '&stars=403';
  }
  $('#test').append('4* checked<br>');
}
if( $('#five-stars').is(':checked') ){
  if( $('#four-stars').is(':checked') || $('#three-stars').is(':checked') || $('#two-stars').is(':checked') ){
    starsQueries += ',404';
  } else {
    starsQueries += '&stars=404';
  }
  $('#test').append('5* checked<br>');
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="two-stars" id="two-stars">
		<label for="two-stars">2*</label>
		<br>
		
		<input type="checkbox" name="three-stars" id="three-stars">
		<label for="three-stars">3*</label>
		<br>
		
		<input type="checkbox" name="four-stars" id="four-stars">
		<label for="four-stars">4*</label>	
		<br>
		
		<input type="checkbox" name="five-stars" id="five-stars">
		<label for="five-stars">5*</label>
    
    <div id='test'>
    
    </div>

​

Answer 3

使用$( selector )而不是( selector )，如果您正在进行星级评分，请考虑使用单选按钮，而不是互斥选项。此外，数据绑定在这里也会有所帮助。也就是说：

​

$(".star_rater").each(function() {
  var min = $(this).data("minstars") || 1,
    max = $(this).data("maxstars") || 3,
    name = $(this).data("formname"),
    curVal = $(this).data("stars");
  if (max > min) {
    var html = [];
    for (i = 0; i < max - min + 1; i++) {
      var val = min + i,
        id = name + val.toString();
      html.push('<input type="radio" name="');
      // insure all radios for this rater are in same group
      html.push(name);
      html.push('" id="');
      html.push(id);
      html.push('" value="');
      html.push(val);
      html.push('"');
      if (val === curVal) {
        html.push(' checked');
      }
      html.push('/>');
      html.push('<label for="');
      html.push(id);
      html.push('">');
      html.push(val);
      html.push('</label>');
    }
  }
  $(this).html(html.join(""));
}).on("change", function() {
  var name = $(this).data("formname"),
    val = $(this).children("input:checked").val();
  $("#output").text([name, val].join("="));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Default has 1-3 stars
<div class="star_rater" data-formname="rater1"></div>
Optional extend max stars to 5
<div class="star_rater" data-maxstars="5" data-formname="rater2"></div>
Range options 5 to 10 (with default = 7)
<div class="star_rater" data-maxstars="10" data-minstars="5" data-stars="7" data-formname="rater3"></div>
<div id="output"></div>

​