複製複選框標記爲另一種形式

富：

<form id="foo_form" method="post" action="foo"> 
    <input class="foo checkbox" id="foo_select_1" name="ids[]" type="checkbox" value="1" /> 
    <input class="foo checkbox" id="foo_select_2" name="ids[]" type="checkbox" value="2" /> 
    <input class="foo checkbox" id="foo_select_3" name="ids[]" type="checkbox" value="3" /> 
    ... 
    <input type="submit" value="action 1" /> 
</form>

條：

<form id="bar_form" method="post" action="bar"> 
    <input class="bar checkbox" id="bar_select_1" name="ids[]" type="checkbox" value="1" /> 
    <input class="bar checkbox" id="bar_select_2" name="ids[]" type="checkbox" value="2" /> 
    <input class="bar checkbox" id="bar_select_3" name="ids[]" type="checkbox" value="3" /> 
    ... 
    # some other input fileds here 
    <input type="submit" value="action 2" /> 
</form>

我需要JS（jQuery的），對於每一個變化複選框foo將在bar更改相應的複選框。

這樣做的主要目標是對相同的複選框有兩種不同的操作。我想用CSS將bar隱藏起來，只留下可見的提交按鈕。所有描述here

來源

2014-04-21 pawel7318

您忘了發佈您嘗試過的JavaScript，但無法正常工作。 – j08691

在這種情況下，我所知道的是它應該是'$（'。foo checkbox'）。change（function（）{...}）''。我不知道設置或取消設置的價值。 MrCode的答案看起來很有希望。 – pawel7318

我希望HTML有''submit'方法'和'action'而不是'form'。 – pawel7318

這將做到這一點：

Fiddle

$(document).ready(function(){ 
    $('#foo_form input:checkbox').change(function(){ 
     $('#bar_' + this.id.replace('foo_', '')).prop('checked', this.checked); 
    }); 
});

來源

2014-04-21 13:34:31 MrCode

@ pawel7318在那裏發佈了答案。希望能幫助到你。 – MrCode

這似乎是一個很奇怪的事情要做。當您選中一個框時，您是否需要從#bar_form表單中獲取當前值的副本？如果是這樣，我會考慮使用數據$('#foo_form').serializeArray()在它發生更改事件後給你。

$('#foo_form').on('change', function() { 
    var $form = $(this); 
    console.table($form.serializeArray()); 
});

來源

2014-04-21 13:43:41

複製複選框標記爲另一種形式

回答

相關問題