2013-08-18 243 views
0

我有一個複選框的表,並且我只希望在每行中檢查三個中的一個。我編寫了一個代碼,它對每一行都很好,但是當我檢查第二行的複選框時,第一行復選框會被取消選中。只有三個複選框中的每一個複選框可用複選框檢查可用jQuery檢查

您可以檢查http://jsfiddle.net/annakoutli/Zp4d5/1/

這裏的代碼是HTML

  <td class="col_featured-ad"><input type="checkbox" id="featured3_ad2" class="radio2 price featured3" value="featured3_ad2" name="featured_ad2" /> 
      </td> 
      <td class="col_featured-ad"><input type="checkbox" id="featured7_ad2" class="radio2 price featured7" value="featured7_ad2" name="featured_ad2" /> 
       </td> 
      <td class="col_featured-ad"><input type="checkbox" id="featured15_ad2" class="radio2 price featured15" value="featured15_ad2" name="featured_ad2" /> 
       </td> 
      </tr> 

這裏是jQuery

$('input.radio1:checkbox').change(function(){ 
    var $group = $('input.radio1:checkbox'); 
    if($(this).is(':checked')){ 
     $group.not($(this)).attr('checked',false); 
    } 
}); 

$('input.radio2:checkbox').change(function(){ 
    var $group = $('input.radio2:checkbox'); 
    if($(this).is(':checked')){ 
     $group.not($(this)).attr('checked',false); 
    } 
}); 

有什麼建議嗎?謝謝大家。

回答

1

除了複選框的使用到位單選按鈕的

$('input.radio2:checkbox').click(function(){ 
    var $chk = $(this), $group = $chk.closest('tr').find('input.radio2:checkbox'); 
    if(this.checked){ 
     $group.not(this).prop('checked', false); 
    } 
}); 

演示:Fiddle

+1

+ +1爲開發人員提供解決方案時應該真正地向誰不懂單選按鈕的人大喊大叫。 –

+0

非常感謝您的回答。我做了我的工作,以及你可以在這裏查看http://jsfiddle.net/annakoutli/Zp4d5/2/ – user2693896

1

我的建議是你錯誤地使用了複選框。複選框應該用來選擇多個元素。如果您只想要選擇一個元素,那麼您應該使用單選按鈕,這些按鈕是專門爲此案例設計的。那麼你將不需要使用任何JavaScript。

+0

是的,你是對的這件事,我想到這點。但那不是我的電話。我必須和 – user2693896

+0

@ user2693896一起工作 - 好的,如果你真的需要使用這個,Arun P Johny的解決方案很好,但是我認爲你最好指導誰設計了這個概念,單選按鈕是如何工作的。 –