Question

我在一个页面上有多个产品，其中包含带有产品信息的表单。

产品输入的默认值是产品的名称，默认情况下 - CD附加在末尾。如果用户选择“数字下载”，我需要更新产品的价值并将“ - CD”交换为“ - 数字”。

我做了一个粗略的jsfiddle，略有变化来显示隐藏的输入。当两个输入只应是所选产品内的输入时，您会注意到两个输入都在变化。

喝彩！

<div class="product">
    <form action="" method="post">
        <input class="product-input" name="product" type="hidden" value="Cool music vol 1 - CD" />
        <label>Select format</label> 
        <input type="radio" name="type" value="CD" checked="checked">CD 
        <input type="radio" name="type" value="Digital">Digital Download<br/>
        <input type="submit" class="product-buy" value="Buy now!" />
    </form>
</div>

<div class="product">
    <form action="" method="post">
        <input class="product-input" name="product" type="hidden" value="Cool music vol 2 - CD" />
        <label>Select format</label> 
        <input type="radio" name="type" value="CD" checked="checked">CD 
        <input type="radio" name="type" value="Digital">Digital Download<br/>
        <input type="submit" class="product-buy" value="Buy now!" />
    </form>
</div>


$(".product").each(function() {
    $('input:radio').bind("change",updateFormat);

        function updateFormat(e){
            e.preventDefault();                     
            var $productValue = $('.product-input').val();
            var $productValueSplit = $productValue.split('-')[0];
            var $radioValue = $("form input[type='radio']:checked").val();

            console.log($productValueSplit + ' - ' + $radioValue);
        }
});

Answer 1

我不太喜欢你构建 HTML 的方式。它让我做一些时髦的事情来获得你想要的东西，但这取决于你。我可以使用此代码实现您的目标：

$('input:radio').each(function(){
    $(this).on("click", function(){
        var ind = $(this).closest(".product").index();
        var $productValue = $('.product-input').eq(ind).val();
        var $productValueSplit = $productValue.split('-')[0];
        var $radioValue = $("form").eq(ind).find('input:checked').val();
        $('.product-input').eq(ind).val($productValueSplit + ' - ' + $radioValue);
    });
});

FIDDLE：http://jsfiddle.net/4ffh9bss/4/

jQuery更改单选按钮更新以前的输入值

1 个答案: