php - 使用 div 作为单选按钮

Question

<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 样式。

我怎样才能做到这一点？

Answer 1

$().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();
});

Answer 2

尝试以下（根据需要嵌入代码）：

$('.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/

我希望它有帮助。

Answer 3

或另一种选择是：

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

1. 获取点击事件
2. 获取父母（在您的情况下是）
3. 为我们的所有孩子设置 css 样式

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

jsfiddle