filter function with radio button - Jquery

LorenzoDonadio
October 27, 2022
216 views
1 vote
2 Answers

All I need is a function to filter my page based on the text contained in the div class desc that is the word PROD or test. I had thought of something like the one contained in the script tags but I can’t get it to work.

 $(function () {
      $('input[name="test"]').on("click", function (a, b) {
        var value = this.value;
        $("#elenco > .desc").hide();
        if (value == "All") {
          $("#elenco > .desc").show();
        } else if (value == "PROD") {
          $("#elenco > .desc")
            .filter(function (a, b) {
              var v = b.value;
              return this.value;
            })
            .show();
        } else if (value == "TEST") {
          $("#elenco > .desc")
            .filter(function (a, b) {
              var v = b.value;
              return this.value;
            })
            .show();
        }
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test" /><label>All</label>
<input type="radio" value="PROD" name="test" /><label> PROD</label>
<input type="radio" value="TEST" name="test" /><label>TEST</label>

<div id="elenco">
      <div class="cliente">
        cliente
        <div class="desc" value="PROD">
          betafrik prod <br />
          <img src="" />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
          <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneBetafrikP">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.13.1.47</button>
              <div class="result" id="resultBetafrikP1">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.13.1.48</button>
              <div class="result" id="resultBetafrikP2">Risultato</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="cliente">
        cliente
        <div class="desc" value="TEST">
          betitaly test <br />
          <img src="" />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
          <button type="button" onclick="reloadmem()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
              <div class="result" id="resultBetitalyT">Risultato</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="cliente">
        cliente
        <div class="desc">
          vincitù test <br />
          <img src="" />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerVincituT()" id="m1">manager</button>
          <button type="button" onclick="reloadmem()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneVincituT">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.55.0.71</button>
              <div class="result" id="resultVincituP">Risultato</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="cliente">
        cliente
        <div class="desc" value="TEST">
          betitaly test <br />
          <img src="  " />
        </div>
        <div class="funzioni">
          INDIRIZZI IP
          <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
          <button type="button" onclick="reloadmem()" id="r1">reload</button>
          <br />
          <ul>
            <li>
              <button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
              <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
            </li>
            <li>
              <button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
              <div class="result" id="resultBetitalyT">Risultato</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

I tried the function above which I can’t get it to work. In practice, based on the selection button, only the results associated with it must appear and by default, the selected button must be ALL.

Answers

try changing the ‘change’ to click like i did here below and adding else if, instead of 3 ‘if’ s

 $(function () {
            $('input[name="test"]').on('click', function (a, b) {
                var value = this.value;
                $('#elenco > .desc').hide();
                if (value == 'All') {
                    $('#elenco > .desc').show();
                }
               else if (value == 'PROD') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return 10 > v;
                    }).show();
                }
              else if (value == 'TEST') {
                    $('#elenco > .desc').filter(function (a, b) {
                        var v = b.value;
                        return v>=10 && v <= 20;
                    }).show();
                }
            });
        });

A quick auto-format of your code shows that, where you have indentation indicating a child, .cliente is not a child of #elenco because you have <div id="elenco"></div>.

Your HTML:

<div id="elenco"></div>
    <div class="cliente">
    </div>
</div>

(with an error on the last </div>)

reformats as

<div id="elenco"></div>
<div class="cliente">
</div>
</div>

so it’s easier to see that cliente is not a child of elenco.

Secondly, your selector is $("#elenco > .desc") where > means a direct-descendent (immediate child or similar term).

This is the same as $("#elenco").children().filter(".desc")

But .cliente is the direct-child and .desc is a child of .cliente – so your selector needs to be #elenco .desc or #elenco > .cliente > .desc

~~Thirdly, you filter by checking .desc .value is <10 – but the .value is "PROD" or "TEST", not numeric.~~

Question was updated:

Thirdly, you filter by return this.value

However, .filter requires a boolean to filter, so "truthy" this.value will always be true.

Looks like you just need to compare, as in:

var v = b.value;
return this.value == v;

For the snippet below I’ve changed this to just match on value using an attribute selector rather than filter.

Matching on attribute doesn’t need the if (value== as it could be just

$("#elenco .desc[value='" + this.value + '"]").show();

but left as 2x if in the snippet in case there’s some other filter to be applied.

$(function() {
  $('input[name="test"]').on('change', function(a, b) {
    var value = this.value;
    console.log(value)
    $('#elenco .desc').hide();
    if (value == 'All') {
      $('#elenco .desc').show();
    }
    if (value == 'PROD') {
      //$('#elenco .desc').filter(function(a, b) {
      //  var v = b.value;
      //  return 10 > v;
      //}).show();
      $('#elenco .desc[value="PROD"]').show();
    }
    if (value == 'TEST') {
      //$('#elenco .desc').filter(function(a, b) {
      //  var v = b.value;
      //  return v >= 10 && v <= 20;
      //}).show();
      $('#elenco .desc[value="TEST"]').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="PROD" name="test"><label> Under 10$</label>
<input type="radio" value="TEST" name="test"><label>Between 10$ - 20$</label>

<div id="elenco">
  <div class="cliente">
    cliente
    <div class="desc" value="PROD">
      betafrik prod <br>
      <img src="">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetafrikP()" id="m1">manager</button>
      <button type="button" onclick="reloadmemBetafrikP()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetafrikP">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.13.1.47</button>
          <div class="result" id="resultBetafrikP1">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.13.1.48</button>
          <div class="result" id="resultBetafrikP2">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc" value="TEST">
      betitaly test <br>
      <img src="">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
          <div class="result" id="resultBetitalyT">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc">
      vincitù test <br>
      <img src="">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerVincituT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneVincituT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.55.0.71</button>
          <div class="result" id="resultVincituP">Risultato</div>
        </li>
      </ul>

    </div>
  </div>

  <div class="cliente">
    cliente
    <div class="desc" value="TEST">
      betitaly test <br>
      <img src="  ">

    </div>
    <div class="funzioni">
      INDIRIZZI IP
      <button type="button" onclick="managerBetitalyT()" id="m1">manager</button>
      <button type="button" onclick="reloadmem()" id="r1">reload</button>
      <br>
      <ul>
        <li><button type="button" onclick="UpVersioneT()" class="rs1">UpVersione</button>
          <div class="resultVersion" id="UpVersioneBetitalyT">Risultato</div>
        </li>
        <li><button type="button" onclick="reloadmem()" class="rs1">10.57.0.71</button>
          <div class="result" id="resultBetitalyT">Risultato</div>
        </li>
      </ul>

    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

filter function with radio button – Jquery

Answers