Check if paragraph has value with jQuery-CodePudding

I want to check in the checkbox only those that have no value in the paragraph. I don't know where I made a mistake in the code, but when I click the button (Value > 0), it marks all the checkboxes. Where is the mistake?

$("input[id*='btnValue']").click(function() {
  var checked = !$(this).data('checked');
  if ($("p[id*='pCompanyValue']").val() == "") {
    $("input[id*='chkCustomer']").prop('checked', checked);
    $(this).data('checked', checked);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="background-color:#f2f2f2;">
  <div >
    <h4 >Select customers:</h4>
    <table  border="0" cellpadding="2" cellspacing="0" width="100%">
      <tbody>
        <tr>
          <td ><input id="ctl06_repCustomers_ctl00_chkAllCustomers" type="checkbox" name="ctl06$repCustomers$ctl00$chkAllCustomers" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl00$chkAllCustomers\',\'\')', 0)"></td>
          <td ><span id="ctl06_repCustomers_ctl00_Label7" >Company name</span></td>
          <td ><span id="ctl06_repCustomers_ctl00_Label1" >Value</span></td>
        </tr>
        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl01_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl01$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl01$chkCustomer\',\'\')', 0)">
          </td>
          <td id="ctl06_repCustomers_ctl01_trCompanyName"  valign="center">
            <p id="ctl06_repCustomers_ctl01_pCompanyName" >random</p>
          </td>
          <td id="ctl06_repCustomers_ctl01_trCompanyValue" >
            <p id="ctl06_repCustomers_ctl01_pCompanyValue" >
              48.438,00</p>
          </td>

        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl02_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl02$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl02$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl02_trCompanyName"  valign="center">
            <p id="ctl06_repCustomers_ctl02_pCompanyName" >random2</p>
          </td>

          <td id="ctl06_repCustomers_ctl02_trCompanyValue" >
            <p id="ctl06_repCustomers_ctl02_pCompanyValue" >
              0,00</p>
          </td>

        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl03_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl03$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl03$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl03_trCompanyName"  valign="center" style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl03_pCompanyName" >Random3</p>
          </td>
          <td id="ctl06_repCustomers_ctl03_trCompanyValue"  style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl03_pCompanyValue" >
            </p>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
  <div >
    <table >
      <tbody>
        <tr>
          <td >
            <input type="submit" name="ctl06$btnValue" value="Value > 0" id="ctl06_btnValue">
          </td>

        </tr>
      </tbody>
    </table>
    <input type="submit" name="ctl06$btnConfirmCustomers" value="OK" id="ctl06_btnConfirmCustomers"  check="true">
  </div>
</div>

Unnecessary: This code is done in asp.net that's why it's generated like this with stupid id names.

CodePudding user response：

Here is how you can make checked only those check-boxes which do not have a value.

$("input[id*='btnValue']").click(function() {
  $("p[id*='pCompanyValue']").each(function () {
    var checkId = $(this).attr("id").replace("pCompanyValue", "chkCustomer");
    if ($(this).text().trim().length > 0) {
      $("#" checkId).attr("checked", true);
    }
  });  
});

CodePudding user response：

Here's what the code looks like now. I don't know why it won't work again.

$("input[id*='btnValue']").click(function() {
  $("p[id*='pCompanyValue']").each(function() {
    var checkId = $(this).attr("id").replace("pCompanyValue", "chkCustomer");
    if ($(this).text().trim().length > 0) {
      $("#"   checkId).attr("checked", true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  style="background-color:#f2f2f2;">
  <div >
    <h4 >Select customers:</h4>
  </div>
  <div id="thisone"  style="max-height: calc(100vh - 210px); overflow-y: auto;">

    <table  border="0" cellpadding="2" cellspacing="0" width="100%">
      <tbody>
        <tr>
          <td ><input id="ctl06_repCustomers_ctl00_chkAllCustomers" type="checkbox" name="ctl06$repCustomers$ctl00$chkAllCustomers" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl00$chkAllCustomers\',\'\')', 0)"></td>
          <td ><span id="ctl06_repCustomers_ctl00_Label7" >Company name</span></td>
          <td ><span id="ctl06_repCustomers_ctl00_Label1" >Value</span></td>
        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl01_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl01$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl01$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl01_trCompanyName"  valign="center">
            <p id="ctl06_repCustomers_ctl01_pCompanyName" >RANDOM</p>
          </td>

          <td id="ctl06_repCustomers_ctl01_trCompanyValue" >
            <p id="ctl06_repCustomers_ctl01_pCompanyValue" >
              48.438,00</p>
          </td>

        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl02_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl02$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl02$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl02_trCompanyName"  valign="center">
            <p id="ctl06_repCustomers_ctl02_pCompanyName" >RANDOM</p>
          </td>

          <td id="ctl06_repCustomers_ctl02_trCompanyValue" >
            <p id="ctl06_repCustomers_ctl02_pCompanyValue" >
              0,00</p>
          </td>

        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl03_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl03$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl03$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl03_trCompanyName"  valign="center" style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl03_pCompanyName" >RANDOM</p>
          </td>

          <td id="ctl06_repCustomers_ctl03_trCompanyValue"  style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl03_pCompanyValue" >
            </p>
          </td>

        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl04_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl04$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl04$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl04_trCompanyName"  valign="center" style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl04_pCompanyName" >RANDOM</p>
          </td>

          <td id="ctl06_repCustomers_ctl04_trCompanyValue"  style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl04_pCompanyValue" >
            </p>
          </td>

        </tr>

        <tr>
          <td>
            <input id="ctl06_repCustomers_ctl05_chkCustomer" type="checkbox" name="ctl06$repCustomers$ctl05$chkCustomer" onclick="javascript:setTimeout('__doPostBack(\'ctl06$repCustomers$ctl05$chkCustomer\',\'\')', 0)">

          </td>
          <td id="ctl06_repCustomers_ctl05_trCompanyName"  valign="center" style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl05_pCompanyName" >RANDOM</p>
          </td>

          <td id="ctl06_repCustomers_ctl05_trCompanyValue"  style="background-color:#fff0e0;">
            <p id="ctl06_repCustomers_ctl05_pCompanyValue" >
            </p>
          </td>

        </tr>
      </tbody>
    </table>

  </div>
  <div >
    <table >
      <tbody>
        <tr>
          <td >
            <input type="submit" name="ctl06$bntValue" value="Value > 0" id="ctl06_bntValue">
          </td>
        </tr>
      </tbody>
    </table>
    <input type="submit" name="ctl06$btnConfirmCustomers" value="OK" id="ctl06_btnConfirmCustomers"  check="true">
  </div>
</div>

EDIT I found a mistake. I went to Google and found a site that compared two Html codes and in the second I wrote bntButton instead of btnButton.