计算选定的复选框和文本区域时出现问题

时间:2019-05-16 14:39:07

标签: javascript jquery html checkbox textarea

我有一个代码,可以对选定的复选框进行计数,并在div中显示它们。

我尝试了许多没有成功的事情,我想要实现的目标是:

  • 填充文本区域时(文本长度> 1)->将1添加到结果中。
  • 当用户键入某些内容(应该是实时的)时,在结果中添加1;当用户删除文本区域中的所有内容时,将其删除1。

Count selected checkboxes (CodePen)

$('input[type="checkbox"]').change(function() {
  var selected = 0;
  var number_of_checkboxes = $('input[type="checkbox"]:checked').length;
  selected += number_of_checkboxes;
  $('#result').html(selected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
  <label for="text1">
        <input type="checkbox" name="text1" id="text1" value="1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
    </label>
  <br>

  <label for="text2">
        <input type="checkbox" name="text2" id="text2" value="1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
    </label>
  <br>

  <label for="text3">
        <input type="checkbox" name="text3" id="text3" value="1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
    </label>
  <br>
  <br>

  <textarea id="selected" minlength="20" name="selected" placeholder="Lorem ipsum dolor sit amet" style="width: 500px; height: 100px;"></textarea>
  <div id="result">0</div>

</div>

2 个答案:

答案 0 :(得分:1)

inputtextarea上使用checkbox事件

$('input[type="checkbox"], #selected').on('input', function() {
  var checkboxes = $('input[type="checkbox"]:checked').length;
  var textarea = $('#selected').val() ? 1 : 0;

  $('#result').html(checkboxes + textarea);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="answers">
  <label for="text1">
        <input type="checkbox" name="text1" id="text1" value="1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
    </label>
  <br>

  <label for="text2">
        <input type="checkbox" name="text2" id="text2" value="1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
    </label>
  <br>

  <label for="text3">
        <input type="checkbox" name="text3" id="text3" value="1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
    </label>
  <br>
  <br>

  <textarea id="selected" minlength="20" name="selected" placeholder="Lorem ipsum dolor sit amet" style="width: 500px; height: 100px;"></textarea>
  <div id="result">0</div>
</div>

答案 1 :(得分:0)

您可以在下面尝试

$('input[type="checkbox"]').change(function() {

  $('#result').html(getCount());
});

$('#selected').bind('input propertychange', function() {
  $('#result').html(getCount());
});

function getCount() {
  var selected = {
    checkBoxCount: 0,
    textBoxCount: 0
  };

  var number_of_checkboxes = $('input[type="checkbox"]:checked').length;
  selected.checkBoxCount += number_of_checkboxes;

  selected.textBoxCount = $('#selected').val() == '' ? 0 : 1;

  return selected.checkBoxCount + selected.textBoxCount;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
  <label for="text1">
            <input type="checkbox" name="text1" id="text1" value="1">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </span>
        </label>
  <br>

  <label for="text2">
            <input type="checkbox" name="text2" id="text2" value="1">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </span>
        </label>
  <br>

  <label for="text3">
            <input type="checkbox" name="text3" id="text3" value="1">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </span>
        </label>
  <br>
  <br>

  <textarea id="selected" minlength="20" name="selected" placeholder="Lorem ipsum dolor sit amet" style="width: 500px; height: 100px;"></textarea>
  <div id="result">0</div>

</div>