嵌套的“如果选中复选框”会引发错误[关闭]答案

【问题标题】：Nested 'if checkbox is checked' throws an error [closed]嵌套的“如果选中复选框”会引发错误[关闭]
【发布时间】：2018-02-08 13:35:07
【问题描述】：

我需要一个要修改的字符串，只要检查/取消选中任何一个复选框，只有当其他人丢弃了一个例外错误时，只有第一个复选框就是作业： " "#two-stars".is 不是函数"。我尝试了不同的条件，但这段代码的核心似乎有问题，我还没有找到。代码：

$('#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/

【问题讨论】：

代码似乎过于复杂，但如果您仔细查看代码，您会发现复制/粘贴错误。
那里缺少一些 jquery（即$）
让你的生活更容易维护，摆脱所有那些如果jsfiddle.net/vf9L1cko

标签： javascript jquery html checkbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您在五个地方缺少 jQuery 对象 $。 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>

【讨论】：

【解决方案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>

【讨论】：