1

チェックボックスがJavaScript関数によってfalseに設定されている場合、次の関数はfalseに設定されていることを認識していないようで、無視します。

HTML

<input type="checkbox" name="accs" id="50" class="arms"/>Arm 1: $50<br/>
<input type="checkbox" name="accs" id="60" class="arms"/>Arm 2: $60<br/>
<input type="checkbox" name="accs" id="70" class="neck"/>Neck 1: $70<br/>
<input type="checkbox" name="accs" id="80" class="neck"/>Neck 2: $80<br/>
<div id="total">$500</div>

Javascript: この関数は、入力クラスに応じてチェックボックスを無効にします

$('.arms, .neck').change(function(){
var myClass = $(this).attr('class'); 
$('.'+myClass).not(this).prop('checked', false); 
});

Javascript next function : チェックボックスが有効または無効の場合にアクションを処理するコードのブロック

var input = document.getElementsByTagName("input");
var total = document.getElementById("total");
var prev;

for(i=0;i<input.length;i++){


input[i].onchange = function(){
if (this.type != 'text'){
  if(this.checked){

$("#total").fadeOut(300);
$("#total").fadeIn(300);

prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) + parseFloat(this.id);
         total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
    }else{
$("#total").fadeOut(300);
$("#total").fadeIn(300);

prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) - parseFloat(this.id);
         total.innerHTML = "$" + prev.formatMoney(0, ',', '.');
     }
   }
  }
}

すべてのチェックボックスをクリックした後、元の価格 (500) には戻らず、追加し続けることに気付きます。

フィドル

ラジオを使用しなかった理由は、フォームがすべてのオプションに対して同じ「入力名」を送信する必要があるためです。

4

1 に答える 1

1

ここでフィドルをセットアップします: http://jsfiddle.net/MarkSchultheiss/r6MXA/2/ このマークアップを使用して:

<input type="checkbox" name="accs" icost="50" class="arms" />Arm 1: $50
<br/>
<input type="checkbox" name="accs" icost="60" class="arms" />Arm 2: $60
<br/>
<input type="checkbox" name="accs" icost="70" class="neck" />Neck 1: $70
<br/>
<input type="checkbox" name="accs" icost="80" class="neck" />Neck 2: $80
<br/>
<div id="total">$500</div>

そしてこのコード：

var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
items.change(function () {
    var myClass = $(this).attr('class');
    $('.' + myClass).not(this).prop('checked', false);
    var total = $('#total');
    var totalcost = 0;
    total.fadeOut(300);
    items.filter(':checked').each(function (i) {
        var cost = $(this).attr('icost');
        totalcost = totalcost + parseFloat(cost);
    });
    total.text("$" + totalcost + ".00"); // fix your format here as needed
    total.fadeIn(300);
});

編集: テキスト合計領域の現在の値に基づいて、チェック/チェック解除サイクル全体を管理します。

var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
// get the initial total and store in a data for use later (resets as needed)
var total = $('#total');
total.data("currentvalue", parseFloat(total.text().replace(/[^0-9\,]+/g, "")));
items.change(function () {
    var currenttotal = total.data("currentvalue");
    var myClass = $(this).attr('class');
    var thisGroup = $('.' + myClass);
    var notme = $('.' + myClass + ':checked').not(this);
    var notmeCost = (notme.length ? notme.attr('icost') : ($(this).is(':checked') ? 0 : $(this).attr('icost')));

    notme.prop('checked', false);
    currenttotal = currenttotal - notmeCost;
    total.fadeOut(300);
    thisGroup.filter(':checked').each(function (i) {
        var cost = $(this).attr('icost');
        currenttotal = currenttotal + parseFloat(cost);
    });
    total.data("currentvalue", currenttotal);
    total.text("$" + currenttotal + ".00"); // fix your format here as needed
    total.fadeIn(300);
});
于 2013-03-22T22:45:10.003 に答える