Как выбрать флажки на основе текстового содержимого? - PullRequest
Новая
       9

Как выбрать флажки на основе текстового содержимого?

0 голосов
/ 30 августа 2018

У меня есть таблица с несколькими флажками. В JavaScript / JQuery я хочу выбрать все из них, кроме пары, основываясь на текстовом содержимом этих данных таблицы. Таким образом, следует установить все флажки, за исключением случаев, когда текстовое содержимое равно «899» и т. Д. Это то, что у меня сейчас: 

$('#select-all').click(function (event) {
    if (this.checked) {
        var items = document.getElementsByClassName('col-store_number');
        for (var i = 0; i < items.length; i++) {
            if (items[i].textContent === 899) {
                items[i].checked = false;
            } else {
                items[i].checked = true;
            }
        }
    }
});

Когда я проверяю флажок «Выбрать все», он ничего не выбирает, так что, скорее всего, он делает их ложными, а не 899. Я сделал console.log (items [i] .textContent); и он вернул правильные значения, поэтому я получаю правильное текстовое содержимое.

Вот как выглядит таблица - 

<td class="col-store_number">899</td>

А вот и флажок - 

<input type="checkbox" name="" value="94" id="id_94" class="checkbox admin__control-checkbox" checked="checked">

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Вот рабочий пример:

https://codebrace.com/editor/b1da3a821

Вместо textContent вы должны использовать value, чтобы получить значения внутри типа ввода. Значение обычно в строковом формате. 

$(document).ready(function () {
    $('#select-all').click(function (event) {
        var items = document.getElementsByClassName('col-store_number');

        for (var i = 0; i < items.length; i++) {
            if (items[i].value == "899") {
                items[i].checked = false;
            } else {
                items[i].checked = true;
            }
        }
    });
});

или вы можете использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt" rel="nofollow noreferrer">parseInt</a>(items[i].value) === 899, если вы действительно хотите проверить значение с помощью целого числа.

Надеюсь, вы ожидали этого! :)

0 голосов
/ 30 августа 2018

( Я удалил мою первую неудачную попытку здесь )

Вторая версия была:

Если флажок найден в ячейке, следующей сразу за ячейкой, содержащей текст, вам следует выполнить следующее (отредактировано - теперь все выполняется «в одну строку»): 

$('#select-all').click(function () {
    $('td.col-store_number:not(:contains(899))')
      .next().find('input:checkbox').prop('checked', this.checked)
});

И немного улучшенная третья версия здесь (работает демо, используя код ES6): 

$('#select-all').click(function () {
   $('td.col-store_number')
      .filter((i,el)=>el.textContent!='899')
      .parent().find('input:checkbox')
      .prop('checked', this.checked)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
master switch:<input type="checkbox" id="select-all" checked="checked">
<table>
<tr><td class="col-store_number">899</td><td>Some other content</td><td><input type="checkbox" name="" value="94" id="id_90" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">4711</td><td>and more content</td><td><input type="checkbox" name="" value="94" id="id_91" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>other content</td><td><input type="checkbox" name="" value="94" id="id_92" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">0815</td><td>yet some more</td><td><input type="checkbox" name="" value="94" id="id_93" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>here too</td><td><input type="checkbox" name="" value="94" id="id_94" class="checkbox admin__control-checkbox" checked="checked"></td><td>Just for the sake of it</td></tr>
<tr><td class="col-store_number">007</td><td>yeah, and here.</td><td><input type="checkbox" name="" value="94" id="id_95" class="checkbox admin__control-checkbox" checked="checked"></td><td>there can be text here too ...</td></tr>
<tr><td class="col-store_number">53</td><td>I am</td><td><input type="checkbox" name="" value="94" id="id_96" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">899</td><td>getting tired</td><td><input type="checkbox" name="" value="94" id="id_97" class="checkbox admin__control-checkbox" checked="checked"></td></tr>
<tr><td class="col-store_number">1899</td><td>of this</td><td><input type="checkbox" name="" value="94" id="id_98" class="checkbox admin__control-checkbox" checked="checked"></td><td>extra checkbox:</td></tr>
<tr><td class="col-store_number">8995</td><td>...</td><td><input type="checkbox" name="" value="94" id="id_99" class="checkbox admin__control-checkbox" checked="checked"></td><td><input type="checkbox" checked="checked"></td></tr>
</table>

Эта последняя версия немного более терпима в отношении макета таблицы: она ищет все ячейки класса "col-store_number", имеющие текстовое содержимое, отличное от 899, и устанавливает / снимает отметки для всех флажков, найденных в та же строка таблицы.

...