使用div作爲單選按鈕

<div> 
    <table class='accor'> 
     <tr> 
      <td>Roll No.</td> 
      <td>12801</td> 
     </tr> 
     <tr> 
      <td>Name</td> 
      <td>XXXX</td> 
     </tr> 
     <tr> 
      <td>Class</td> 
      <td>MS</td> 
     </tr> 
    </table> 
</div>

我希望上面的代碼作爲單選按鈕。上面的代碼在php while循環中運行，並且從數據庫提供數據。（我還需要使用checked=checked來匹配預定義值。）我正在使用帶有收音機的jquery ui buttonset style。使用div作爲單選按鈕

我該如何做到這一點？

來源

2013-08-18 RatDon

具有u嘗試到現在呢？ – Rahul

告訴我們你到目前爲止做了什麼.. –

我試過了jquery'（selector）.click（）'，然後通過ajax（$ .post）提交表單來更新xml文件中的選擇。即使沒有使用單選按鈕也能正常工作。但我無法使用ui按鈕和檢查=檢查選項與我的方法。對不起，我無法向你展示代碼，因爲它們大多數都是使用'echo'和變量的php代碼。並不能在小提琴中表現出來。 – RatDon

$().buttonset將所有input type='radio'元素都放在選擇器中，並在其中設置一個程式化按鈕。對於這些元素中的每一個，關聯的label都放置在所得按鈕的顯示屏上。因此，要讓標籤不僅僅是一行文字的按鈕，只需將內容放置在label內。

<form> 
    <div id="radio"> 
    <input type="radio" id="radio1" name="radio" /> 
     <label for="radio1"> 
     <div> 
      <table class='accor'> 
      <tr> 
       <td>Roll No.</td> 
       <td>12801</td> 
      </tr> 
      <tr> 
       <td>Name</td> 
       <td>XXXX</td> 
      </tr> 
      </table> 
     </div> 
     </label> 
     <input type="radio" id="radio2" name="radio" checked="checked" /> 
     <label for="radio2"><div> 
     <table class='accor'> 
      <tr> 
      <td>Roll No.</td> 
      <td>12801</td> 
      </tr> 
      <tr> 
      <td>Name</td> 
      <td>XXXX</td> 
      </tr> 
     </table> 
     </div> 
    </label> 
    </div> 
</form>

JS：

$(function() { 
    $("#radio").buttonset(); 
});

來源

2013-08-18 18:50:41 CheeseWarlock

試試以下（只要你想你的嵌入代碼）：

$('.accor td').on("click",function(){ 
    $('td').css('background-color','#eee'); 
    var rowNumber = $(this).closest('tr').index();  
    setSelected(rowNumber); 
}); 

function setSelected(rowNumber){  
    $('tr').eq(rowNumber).find('td').css('background-color','#ccc'); 
} 

setSelected(2);

工作小提琴這裏：http://jsfiddle.net/ZEwpE/2/

我希望它能幫助。

來源

2013-08-18 18:18:53 maverickosama92

或另一種選擇這樣做是：

$('.accor td').on("click",function(){ 
    $('td').css('background-color','#eee'); 
    var tr = $(this).parent(); 
    $(tr).children().css('background-color','#ccc');  
});

獲得（在你的情況是）
設置css樣式單擊事件
獲取父母的我們

所有孩子的

但它只是替代（非常類似）的方法：

jsfiddle

來源

2013-08-18 18:27:01

使用div作爲單選按鈕

回答

相關問題