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 style收音机。

我怎样才能实现这一目标？

Answer 1

尝试关注（根据需要嵌入代码）：

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

或其他选项是：

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

获取点击事件
获取父母（在您的情况下是）
将css样式设置为

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

jsfiddle

Answer 3

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

使用div作为单选按钮

3 个答案: