jQuery,如果每个li内的每个输入值== 0

时间:2018-07-17 16:27:46

标签: javascript jquery html

我正在尝试解决此问题。我有多个输入,我想比较每个人的值== 0并进行检查。

我不知道该怎么做-我花了整整一天的时间寻找并找到一种方法来做,却不知道如何进一步。我试图找出是否选中了一个输入并具有该值。

感谢您的帮助。

$(document).on('change','select, input', function() {
  console.log('input/select has been changed');
  
  var $this = $(this);
  var $inputValue = $this.val();
  
  console.log('input Value is ' + $inputValue);
  
  if ($inputValue == 0 && $this.is(':checked')) {
    console.log('One input is checked and has 0 value');
  }
  
  if ('all first inputs are checked and has 0 value') {
    console.warn('Could U help me?');
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="destinations">
    <ul>
      <li>
        <label>
          <input type="checkbox" name="destination" value="0">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="destination" value="5">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="destination" value="3">
        </label>
      </li>
    </ul>
  </div>
  <div class="languages">
    <ul>
      <li>
        <label>
          <input type="radio" name="language" value="0">
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="language" value="5">
        </label>
      </li>
      <li>
        <label>
          <input type="radio" name="language" value="3">
        </label>
      </li>
    </ul>
  </div>
  
  <div class="rooms">
    <ul>
      <li>
        <label>
          <input type="checkbox" name="room" value="0">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="room" value="5">
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="room" value="3">
        </label>
      </li>
    </ul>
  </div>
</body>

2 个答案:

答案 0 :(得分:0)

<script>
        $(document).on('change', 'select, input', function () {
            console.log('input/select has been changed');
            checkInputValue();

        });
        function checkInputValue() {
            var count = 0;
            $('input').each(function ( index,value) {
                console.log(value);
                console.log(index);
                if ($(value).val() == 0 && $(value).is(':checked')) {
                    count = count + 1;
                    console.log(count+' input is checked and has 0 value');
                }

            });
            console.log($('input').length);
            if ($('ul').length == count)
                console.log('all first inputs are checked and has 0 value')
        }
    </script>

答案 1 :(得分:0)

我不确定您想要什么,但是我认为这可以帮助您

 $(document).on('change', 'select, input', function () {
                console.log('input/select has been changed');
                checkInputValue();

            });
            
            function checkInputValue() {
                var inputs = $('input');
                var inputsWithValZero = $(inputs).filter(function (index,elm) {                
                    return ($(elm).val() == 0);
                });
                
                var inputsWithValZeroAndChecked = $(inputs).filter(function (index,elm) {                
                    return ($(elm).val() == 0 && $(elm).is(':checked'));
                });
                            
                if ($(inputsWithValZero).length == inputsWithValZeroAndChecked.length){
                    console.log('all checked inputs checked has 0 value');
                    }
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <div class="destinations">
        <ul>
          <li>
            <label>
              <input type="checkbox" name="destination" value="0">
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="destination" value="5">
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="destination" value="3">
            </label>
          </li>
        </ul>
      </div>
      <div class="languages">
        <ul>
          <li>
            <label>
              <input type="radio" name="language" value="0">
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="language" value="5">
            </label>
          </li>
          <li>
            <label>
              <input type="radio" name="language" value="3">
            </label>
          </li>
        </ul>
      </div>
      
      <div class="rooms">
        <ul>
          <li>
            <label>
              <input type="checkbox" name="room" value="0">
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="room" value="5">
            </label>
          </li>
          <li>
            <label>
              <input type="checkbox" name="room" value="3">
            </label>
          </li>
        </ul>
      </div>
    </body>