0

たとえば、次のようなhtmlがあります。

<li><label class="desc"><font color="green">Want to get email ($<span id="price">50</span>/month)</font></label>
            <input type="checkbox" checked="" id="subscribe" name="subscribe"> bla bla bla</li>

<li><label class="desc">-$30 subscribe</label>
            <input type="checkbox"  id="custom_test" name="custom_test">Please check this to add your own email</li>

構造:

[チェックボックス] 購読 (50$/月) テキスト bla bla

[別のチェックボックス] 自分のメールを追加するために-30$ を提供します)

したがって、基本的に、購読するためのチェックボックスがあり、その購読の価格が表示され、その下に「オファー」の別のチェックボックスがあり、そのチェックボックスをオンにすると、上記の購読の価格をインラインで編集する必要があります。チェックされていない場合は同じままです。

2番目のチェックボックスのIDを持つそのスパンのIDに応じて、Ajaxまたはある種のJQuery/JS関数を使用してこれを行うにはどうすればよいですか?

JSフィドル

よろしくお願いします！

4

2 に答える 2

1

jQueryを使用すると、これは次のようになります

$('#custom_test').change(function(){
    if($(this).is(':checked')){
        $("#price").text($('#price').text()*1 - 30);    
    }else{
        $("#price").text($('#price').text()*1 + 30);   
    }
});

フィドルをチェックアウト：http： //jsfiddle.net/kkfJF/29/

お役に立てれば

于 2012-11-30T10:17:42.627 に答える
1

非セマンティック マークアップがひどいことを知っていますね。正気なことをする前に、それを有効でセマンティックにする必要があります。ただし、現在の状況では、jQuery スニペットは次のとおりです。

var price = document.getElementById('price'),
    origPrice = parseInt(price.innerHTML),
    reducedPrice = parseInt(price.innerHTML) - 30;

$('#custom_test').change(function(ev) {
    if (ev.target.checked) {
        price.innerHTML = reducedPrice;
    } else {
        price.innerHTML = origPrice;
    }
});​

JSフィドル

マークアップを更新する方法は次のとおりです。

<ul>
<li>
    <label class="desc main">
        Want to get email ($<span id="price">50</span>/month)
        <input type="checkbox" checked="" id="subscribe" name="subscribe">
    </label>
    Some text
</li>
<li>
    <label class="desc offer">
        -$30 subscribe
        <input type="checkbox"  id="custom_test" name="custom_test">
    </label>
    Please check this to add your own email
</li>
</ul>

JSフィドル

于 2012-11-30T10:12:57.550 に答える