Question

<section id="extensions" class=" extensions pad-80">
    <div class="myvolunteer-header">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h2 class="lg-title text-center"><span>Schemes for Mentally Retarded Children<br /> Mentally Challanged by God</span></h2>
                </div> <!--/.col-->
                <div class="col-md-6 col-sm-12 col-xs-12 col-md-offset-3">
                    <p class="lg-text text-center"></p>
                </div> <!--/.col-->
            </div>
        </div>
    </div>
    <div class="container tr-donate">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <table align="center">
                    <tr>
                        <th>No.</th>
                        <th>Amount</th>
                        <th>Information of Scheme</th>
                    </tr>
                    <tr>
                        <td style="padding: 10px"></td>
                    </tr>
                    <tr class="someSwitchOptionWarning1">
                        <td>1.</td>
                        <td>Rs.25,000.00</td>
                        <td>Scheme of adoption of mentally retarded child permanently</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning1" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="25000" />
                                <label for="someSwitchOptionWarning1" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning2">
                        <td>2.</td>
                        <td>Rs.25,000.00</td>
                        <td>Scheme of sweet diet one time/ pernanent date in a year</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning2" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="25000" />
                                <label for="someSwitchOptionWarning2" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning3">
                        <td>3.</td>
                        <td>Rs.15,000.00</td>
                        <td>Scheme of simple diet one time of time of permanent date in a year</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning3" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="15000"/>
                                <label for="someSwitchOptionWarning3" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning4">
                        <td>4.</td>
                        <td>Rs.4,000.00</td>
                        <td>Sheme of one time sweet diet</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning4" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="4000"/>
                                <label for="someSwitchOptionWarning4" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning5">
                        <td>5.</td>
                        <td>Rs.2,000.00</td>
                        <td>Scheme of one time simple diet</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning5" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="2000"/>
                                <label for="someSwitchOptionWarning5" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning6">
                        <td>6.</td>
                        <td>Rs.1,000.00</td>
                        <td>Sheme of one time breakfast</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning6" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="1000"/>
                                <label for="someSwitchOptionWarning6" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning7">
                        <td>7.</td>
                        <td>Rs.1,250.00</td>
                        <td>Scheme of one time milk</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning7" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="1250"/>
                                <label for="someSwitchOptionWarning7" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning8">
                        <td>8.</td>
                        <td>Rs.50,000.00</td>
                        <td>Scheme of school uniform of 100 children</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning8" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="50000"/>
                                <label for="someSwitchOptionWarning8" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning9">
                        <td>9.</td>
                        <td>Rs.1,00,000.00</td>
                        <td>Scheme of one month kiranas</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning9" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="100000"/>
                                <label for="someSwitchOptionWarning9" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning10">
                        <td>10.</td>
                        <td>Rs.11,000.00</td>
                        <td>The name of donar shall be included in the General list of donors for construction of bhavan of the institution</td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning10" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="11000"/>
                                <label for="someSwitchOptionWarning10" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr class="someSwitchOptionWarning11">
                        <td>11.</td>
                        <td>Other</td>
                        <td class="btn-parent">
                            <input type="text" id="btn_amount" name="amount" />
                            <span class="bar-amount"></span>
                            <label for="btn-amount" id="lbl_amount">Enter Amount</label>
                        </td>
                        <td>
                            <div class="material-switch ">
                                <input id="someSwitchOptionWarning11" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="0"/>
                                <label for="someSwitchOptionWarning11" class="label-warning"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 10px"></td>
                    </tr>
                </table>
                <label for="amount">Total Amount</label>
                <input type="text" name="amount" id="donationAmount" style="display: block;">
            </div> <!--/.col-->
        </div> <!--/.row-->
    </div> <!--/.container-->

如果选中复选框，我如何计算复选框值和文本框值的总和，当取消选中复选框时，如何减去复选框或文本框的值。

我尝试了jquery但它只计算复选框的值但是如何计算textbox的值

最后一个名为total的文本框，其中显示复选框和文本框的总数，请帮助我

Answer 1

试试这个，它应该按你的意愿去做。

$("[class^=someSwitchOptionWarning] input[type=checkbox], [class^=someSwitchOptionWarning] input[name=amount]").on("change keyup",function(){
  var sum = 0;
  $("[class^=someSwitchOptionWarning] input[type=checkbox]:checked").map(function() {
    sum += parseInt($(this).val())
  }).get();

  sum += parseInt($("[class^=someSwitchOptionWarning] input[name=amount]").val().length == 0 ? 0 : $("[class^=someSwitchOptionWarning] input[name=amount]").val())

  $("#donationAmount").val(sum)
})

<强>演示

＆＃13;

function change(obj){
}

$("[class^=someSwitchOptionWarning] input[type=checkbox], [class^=someSwitchOptionWarning] input[name=amount]").on("change keyup",function(){
  var sum = 0;
  $("[class^=someSwitchOptionWarning] input[type=checkbox]:checked").map(function() {
    sum += parseInt($(this).val())
  }).get();
  
  sum += parseInt($("[class^=someSwitchOptionWarning] input[name=amount]").val().length == 0 ? 0 : $("[class^=someSwitchOptionWarning] input[name=amount]").val())
  
  $("#donationAmount").val(sum)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="extensions" class=" extensions pad-80">
  <div class="myvolunteer-header">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <h2 class="lg-title text-center"><span>Schemes for Mentally Retarded Children<br /> Mentally Challanged by God</span></h2>
        </div>
        <!--/.col-->
        <div class="col-md-6 col-sm-12 col-xs-12 col-md-offset-3">
          <p class="lg-text text-center"></p>
        </div>
        <!--/.col-->
      </div>
    </div>
  </div>
  <div class="container tr-donate">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <table align="center">
          <tr>
            <th>No.</th>
            <th>Amount</th>
            <th>Information of Scheme</th>
          </tr>
          <tr>
            <td style="padding: 10px"></td>
          </tr>
          <tr class="someSwitchOptionWarning1">
            <td>1.</td>
            <td>Rs.25,000.00</td>
            <td>Scheme of adoption of mentally retarded child permanently</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning1" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="25000" />
                <label for="someSwitchOptionWarning1" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning2">
            <td>2.</td>
            <td>Rs.25,000.00</td>
            <td>Scheme of sweet diet one time/ pernanent date in a year</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning2" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="25000" />
                <label for="someSwitchOptionWarning2" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning3">
            <td>3.</td>
            <td>Rs.15,000.00</td>
            <td>Scheme of simple diet one time of time of permanent date in a year</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning3" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="15000" />
                <label for="someSwitchOptionWarning3" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning4">
            <td>4.</td>
            <td>Rs.4,000.00</td>
            <td>Sheme of one time sweet diet</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning4" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="4000" />
                <label for="someSwitchOptionWarning4" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning5">
            <td>5.</td>
            <td>Rs.2,000.00</td>
            <td>Scheme of one time simple diet</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning5" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="2000" />
                <label for="someSwitchOptionWarning5" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning6">
            <td>6.</td>
            <td>Rs.1,000.00</td>
            <td>Sheme of one time breakfast</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning6" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="1000" />
                <label for="someSwitchOptionWarning6" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning7">
            <td>7.</td>
            <td>Rs.1,250.00</td>
            <td>Scheme of one time milk</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning7" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="1250" />
                <label for="someSwitchOptionWarning7" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning8">
            <td>8.</td>
            <td>Rs.50,000.00</td>
            <td>Scheme of school uniform of 100 children</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning8" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="50000" />
                <label for="someSwitchOptionWarning8" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning9">
            <td>9.</td>
            <td>Rs.1,00,000.00</td>
            <td>Scheme of one month kiranas</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning9" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="100000" />
                <label for="someSwitchOptionWarning9" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning10">
            <td>10.</td>
            <td>Rs.11,000.00</td>
            <td>The name of donar shall be included in the General list of donors for construction of bhavan of the institution</td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning10" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="11000" />
                <label for="someSwitchOptionWarning10" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr class="someSwitchOptionWarning11">
            <td>11.</td>
            <td>Other</td>
            <td class="btn-parent">
              <input type="text" id="btn_amount" name="amount" />
              <span class="bar-amount"></span>
              <label for="btn-amount" id="lbl_amount">Enter Amount</label>
            </td>
            <td>
              <div class="material-switch ">
                <input id="someSwitchOptionWarning11" onclick="change(this.id)" name="someSwitchOption001" type="checkbox" value="0" />
                <label for="someSwitchOptionWarning11" class="label-warning"></label>
              </div>
            </td>
          </tr>
          <tr>
            <td style="padding: 10px"></td>
          </tr>
        </table>
        <label for="amount">Total Amount</label>
        <input type="text" name="amount" id="donationAmount" style="display: block;">
      </div>
      <!--/.col-->
    </div>
    <!--/.row-->
  </div>
  <!--/.container-->

＆＃13;

Answer 2

为您所需的输入提供确切的类别名称，例如价格，然后

$(document).ready(function(){

    $(".price").change(function(){
       var total=0;

       $(".price").each(function(){
         if($(this).is(":checked")) {total=total+$(this).val()}
        })
   })

   //finally put the total in desired field
   $("input[name=amount]").val(total)
})

Answer 3

试试这个。另请注意，您应该只允许在文本框中输入数字，如果文本框为空，则应在其中显示0作为值。

$(document).ready(function () {
    var checkboxtotal = 0;
    var textboxValue = 0
    change = function(id){
        if($('#'+id+':checked').length == 1)
          checkboxtotal = checkboxtotal + parseInt($('#'+id).val()) + textboxValue;
         else
          checkboxtotal = checkboxtotal - parseInt($('#'+id).val()) + textboxValue;
        $('#donationAmount').val(checkboxtotal);
    }
    $('#btn_amount').on('input', function() {
      textboxValue = $('#btn_amount').val();
      $('#donationAmount').val(checkboxtotal + parseInt(textboxValue));
    });
});

当选中复选框或未选中复选框时，如何在另一个文本框中获取复选框值和文本框值的总和，删除值

3 个答案: