只需點擊一下動態製作的複選框列表即可查看2個複選框

我有一個複選框列表。一個是名字，另一個是價格。我需要檢查一個價格和相應的名稱自動檢查。只需點擊一下動態製作的複選框列表即可查看2個複選框

這裏是我的代碼：

<input id="name1" name="name1" value="Option Name 1" type="checkbox"> 
<input id="price1" name="price1" value="125" type="checkbox">Option Name 1<br> 

<input id="name2" name="name2" value="Option Name 2" type="checkbox"> 
<input id="price2" name="price2" value="150" type="checkbox">Option Name 2<br> 

<input id="name3" name="name3" value="Option Name 3" type="checkbox"> 
<input id="price3" name="price3" value="175" type="checkbox">Option Name 3<br>

我如何能做到這一點的JavaScript？如果它只有一套，我可以做到，但我不知道如何做到這一點，而無需爲每個功能單獨製作一個功能。此複選框列表是使用PHP動態創建的，因此根據所選數據庫中的項目，將會有更多或更少的選項。

來源

2013-06-28 Doug Steinberg

可能是這樣的？

添加類name和price的複選框，以便於檢測。並使用事件deleagtion因爲你是動態追加

$(document).on('change','.name, .price', function() { //provide a container selector instead of document. 
    $(this).next('br').prevAll(':eq(1),:eq(0)').prop('checked', this.checked); 
});

Fiddle

，如果你不希望其他類添加到標記，然後用startswith選擇，併爲方式切換兩種。

$(document).on('change',':checkbox[id^=name],:checkbox[id^=price]', function() { //provide a container selector instead of document. 
    $(this).nextUntil('br').andSelf().prev().andSelf().prop('checked', this.checked); 
});

Fiddle

這只是選擇下一個可用BR

來源

2013-06-28 20:32:42 PSL

很好的答案！謝謝。 –

@DougSteinberg不客氣。如果檢查過程，你不想檢查名稱嗎？或只需要一種方法？用那個更新了第二個例子。 – PSL

我打算使用css來隱藏名稱複選框。這樣用戶只能看到一個複選框，但是這兩個值都是從表單發送的。 –

給價格輸入一類「價格」或類似的東西，並給名稱輸入一類「名稱」或類似的東西。

然後使用類選擇綁定的事件，並使用next('.price')或previous('.name')

來源

2013-06-28 20:29:50

我一個類添加到每個輸入找到相應的複選框，很容易從那裏：

$(document).ready(function() { 
    $(".name").change(function(){ 
     if($(this).is(":checked")){ 
      $(this).next().attr("checked","checked"); 
     }else{ 
      $(this).next().removeAttr("checked"); 
     } 
    }) 
});

結賬的jsfiddle ：http://jsfiddle.net/megarameno/BSYvE/

來源

2013-06-28 20:29:52

不要使用<br>了，取而代之的是，在申報單包裝他們。這樣他們可以被認爲是一個DOM組，並且你的JS可以是智能的 - 不需要一大堆事件處理程序！

本示例使用jQuery：http://jsfiddle.net/Nu8w9/2/。它以任何方式檢查整行，我認爲這是你想要的。從字面上解釋你的問題，它只會是$('.row').on('change input:nth-child(2)', function (e) { $(e.target).closest('.row').find('input:nth-child(1)')[0].checked = e.target.checked; });

來源

2013-06-28 20:41:02

只需點擊一下動態製作的複選框列表即可查看2個複選框

回答

相關問題