Question

我想要一个表格，有人选择垂直和水平单选按钮的唯一值（你会在下面看到我的意思）。我知道我可以用name做到这一点。在下面的代码中，您会看到垂直方向的相同名称。

这是我的代码

<tr>
    <td style="text-align:left;">tracking_url</td>
    <td><input type="radio" name="tracking_url" value="image_url"></td>
    <td><input type="radio" name="pr_image" value="tracking_url"></td>
    <td><input type="radio" name="availability" value="tracking_url"></td>
    <td><input type="radio" name="pr_price" value="tracking_url"></td>
    <td><input type="radio" name="pr_final_price" value="tracking_url"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">image_url</td>
    <td><input type="radio" name="tracking_url" value="image_url"></td>
    <td><input type="radio" name="pr_image" value="image_url"></td>
    <td><input type="radio" name="availability" value="image_url"></td>
    <td><input type="radio" name="pr_price" value="image_url"></td>
    <td><input type="radio" name="pr_final_price" value="image_url"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">availability</td>
    <td><input type="radio" name="tracking_url" value="availability"></td>
    <td><input type="radio" name="pr_image" value="availability"></td>
    <td><input type="radio" name="availability" value="availability"></td>
    <td><input type="radio" name="pr_price" value="availability"></td>
    <td><input type="radio" name="pr_final_price" value="availability"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">price</td>
    <td><input type="radio" name="tracking_url" value="price"></td>
    <td><input type="radio" name="pr_image" value="price"></td>
    <td><input type="radio" name="availability" value="price"></td>
    <td><input type="radio" name="pr_price" value="price"></td>
    <td><input type="radio" name="pr_final_price" value="price"></td>
    <td></td>
</tr>
<tr>
    <td style="text-align:left;">full_price</td>
    <td><input type="radio" name="tracking_url" value="full_price"></td>
    <td><input type="radio" name="pr_image" value="full_price"></td>
    <td><input type="radio" name="availability" value="full_price"></td>
    <td><input type="radio" name="pr_price" value="full_price"></td>
    <td><input type="radio" name="pr_final_price" value="full_price"></td>
    <td></td>
</tr>

这就是我想要使用单选按钮的方式

但也有人可以使用

等单选按钮

有没有办法用html或javascript做？

Answer 1

var col, el;
    
$("input[type=radio]").click(function() {
    el = $(this);
    col = el.data("col");
    $("input[data-col=" + col + "]").prop("checked", false);
    el.prop("checked", true);
});

table {
    border-collapse: collapse;    
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table>
<tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<tr>
    <td>Twix</td>
    <td><input type="radio" name="row-1" data-col="1"></td>
    <td><input type="radio" name="row-1" data-col="2"></td>
    <td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
    <td>Snickers</td>
    <td><input type="radio" name="row-2" data-col="1"></td>
    <td><input type="radio" name="row-2" data-col="2"></td>
    <td><input type="radio" name="row-2" data-col="3"></td>
</tr>
<tr>
    <td>Butterfingers</td>
    <td><input type="radio" name="row-3" data-col="1"></td>
    <td><input type="radio" name="row-3" data-col="2"></td>
    <td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>

https://css-tricks.com/radio-buttons-with-2-way-exclusivity/

Answer 2

一行中的单选按钮需要具有相同的name="nameValue"值。每个单选按钮的value字段可以不同。

Answer 3

我认为使用复选框会更好。并控制是否可以使用javascript检查其他复选框。

Answer 4

这里我在Angular 7输入单选按钮中垂直和水平实现了

其背后的想法是，通过单选按钮，我们具有name属性，该属性使得可以按行或按列选择，但同时按行和按列选择。每当按钮单击时，我将行放在名称中，并使用javascript处理列。

这是HTML代码

<section class="editor">
 <strong>Editor</strong>
  <div>
   <label>Add option</label>
   <button (click)="addOption()">+</button>
  <div *ngFor="let option of options;let i = index">
  <span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)" 
    *ngIf="options.length>2">X</button>
  </div>
 </div>
</section>
<hr>
<section>
 <strong>Builder</strong>
  <div class="builder">
    <label>Question title goes here</label><br>
    <div *ngFor="let option of options;let row_index = index">
     <span>{{option.title +(row_index+1)}}</span>
     <span *ngFor="let rank of options;let column_index=index">
       <input type="radio" name="{{row_index}}" class="{{column_index}}" 
         (click)="check(column_index,$event)">
     </span>
   </div>   
  </div>
</section>

这是我使用Java脚本实现的.ts文件代码

export class AppComponent {
  options = [{
  title: "option",
  rank: 0,
}, {
 title: "option",
 rank: 0
}]
constructor() {

 }
  ngOnInit(): void { }
 addOption() {
  this.options.push({
  title: "option",
  rank: 0
  })
 }
deleteOption(i) {
  this.options.splice(i, 1);
}
check(column_index, event) {

Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}

输入单选按钮垂直和水平

4 个答案: