Question

我想写一个二十五行的二进制单选按钮列表（左，右）。

一旦选中左侧的单选按钮（如第8行），我想要右侧的所有单选按钮＆lt;第8行被勾选并且所有左侧右侧单选按钮＆gt;第8行打勾。

你能指出我正确的方向吗？

<form action="" method="post" role="form" class="form" id="form" onsubmit="return markFormSubmitted()"><input type='hidden' name='csrfmiddlewaretoken' value='32CPQSS1vecbL2RH5gIj8dJvG8NPFcOk' />
<input type="hidden" value="/p/sugizote/discounting/ChoicesOne/1/" name="origin_url" />
<table>
<tr><td> 
<label class="radio-inline" for="id_quarterlist_0_1"><input type="radio" id="id_quarterlist_0_1" value="A" name="quarterlist_0" required> A</label>
<label class="radio-inline" for="id_quarterlist_0_2"><input type="radio" id="id_quarterlist_0_2" value="B" name="quarterlist_0" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_1_1"><input type="radio" id="id_quarterlist_1_1" value="A" name="quarterlist_1" required> A</label>
<label class="radio-inline" for="id_quarterlist_1_2"><input type="radio" id="id_quarterlist_1_2" value="B" name="quarterlist_1" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_2_1"><input type="radio" id="id_quarterlist_2_1" value="A" name="quarterlist_2" required> A</label>
<label class="radio-inline" for="id_quarterlist_2_2"><input type="radio" id="id_quarterlist_2_2" value="B" name="quarterlist_2" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_3_1"><input type="radio" id="id_quarterlist_3_1" value="A" name="quarterlist_3" required> A</label> 
<label class="radio-inline" for="id_quarterlist_3_2"><input type="radio" id="id_quarterlist_3_2" value="B" name="quarterlist_3" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_4_1"><input type="radio" id="id_quarterlist_4_1" value="A" name="quarterlist_4" required> A</label>
<label class="radio-inline" for="id_quarterlist_4_2"><input type="radio" id="id_quarterlist_4_2" value="B" name="quarterlist_4" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_5_1"><input type="radio" id="id_quarterlist_5_1" value="A" name="quarterlist_5" required> A</label>
<label class="radio-inline" for="id_quarterlist_5_2"><input type="radio" id="id_quarterlist_5_2" value="B" name="quarterlist_5" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_6_1"><input type="radio" id="id_quarterlist_6_1" value="A" name="quarterlist_6" required> A</label>
<label class="radio-inline" for="id_quarterlist_6_2"><input type="radio" id="id_quarterlist_6_2" value="B" name="quarterlist_6" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_7_1"><input type="radio" id="id_quarterlist_7_1" value="A" name="quarterlist_7" required> A</label>
<label class="radio-inline" for="id_quarterlist_7_2"><input type="radio" id="id_quarterlist_7_2" value="B" name="quarterlist_7" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_8_1"><input type="radio" id="id_quarterlist_8_1" value="A" name="quarterlist_8" required> A</label>
<label class="radio-inline" for="id_quarterlist_8_2"><input type="radio" id="id_quarterlist_8_2" value="B" name="quarterlist_8" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_9_1"><input type="radio" id="id_quarterlist_9_1" value="A" name="quarterlist_9" required> A</label>
<label class="radio-inline" for="id_quarterlist_9_2"><input type="radio" id="id_quarterlist_9_2" value="B" name="quarterlist_9" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_10_1"><input type="radio" id="id_quarterlist_10_1" value="A" name="quarterlist_10" required> A</label>
<label class="radio-inline" for="id_quarterlist_10_2"><input type="radio" id="id_quarterlist_10_2" value="B" name="quarterlist_10" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_11_1"><input type="radio" id="id_quarterlist_11_1" value="A" name="quarterlist_11" required> A</label>
<label class="radio-inline" for="id_quarterlist_11_2"><input type="radio" id="id_quarterlist_11_2" value="B" name="quarterlist_11" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_12_1"><input type="radio" id="id_quarterlist_12_1" value="A" name="quarterlist_12" required> A</label>
<label class="radio-inline" for="id_quarterlist_12_2"><input type="radio" id="id_quarterlist_12_2" value="B" name="quarterlist_12" required> B</label>
</td></tr>
<tr><td>
<label class="radio-inline" for="id_quarterlist_13_1"><input type="radio" id="id_quarterlist_13_1" value="A" name="quarterlist_13" required> A</label>
<label class="radio-inline" for="id_quarterlist_13_2"><input type="radio" id="id_quarterlist_13_2" value="B" name="quarterlist_13" required> B</label>
</td></tr>
</table>

输出应如下所示： Binary Radio button list

我没有jquery的起点，用什么来达到这个目的。

THX。

Answer 1

我得到了很多修补工作。对于任何搜索，这是代码。如果你检查左侧（A）的一个字段，那么所有右侧（B）都会被检查到被点击的一个和所有左侧（A）从那里到最后一个。

<table>
  <tr style="background:#3a3a3a;color:#ffffff"><td><b>Option A</b> </td><td><b>A</b></td><td><b>B</b></td><td><b>Option B</b></td></tr>
  <tr><td>in Woche <b>1</b></td>
    <td><input type="radio" id="0" value="1" name="quarterlist_0" onClick="left_click(this.id)" required></td>
    <td><input type="radio" id="0" value="2" name="quarterlist_0" onClick="right_click(this.id)" required></td>
    <td>wird in Woche <b>1</b> beginnen und wird (nach) Woche <b>13</b> enden</td></tr>
  <tr><td>in Woche <b>1</b></td>
    <td><input type="radio" id="1" value="1" name="quarterlist_1" onClick="left_click(this.id)" required></td>
    <td><input type="radio" id="1" value="2" name="quarterlist_1" onClick="right_click(this.id)" required></td>
    <td>wird in Woche <b>2</b> beginnen und wird (nach) Woche <b>13</b> enden</td></tr>
  {% for i in player.ranging %}
  <tr><td>wird in Woche <b>1</b> beginnen und wird (nach) Woche <b>{{i}}</b> enden</td>
    <td><input type="radio" id="{{i}}" value="1" name="quarterlist_{{i}}" onClick="left_click(this.id)" required></td>
    <td><input type="radio" id="{{i}}" value="2" name="quarterlist_{{i}}" onClick="right_click(this.id)" required></td>
    <td>wird in Woche <b>{{i|add:1}}</b> beginnen und wird (nach) Woche <b>13</b> enden </td></tr>
{% endfor %}
  <tr><td>wird in Woche <b>1</b> beginnen und wird (nach) Woche <b>12</b> enden</td>
    <td><input type="radio" id="12" value="1" name="quarterlist_12" onClick="left_click(this.id)" required></td>
    <td><input type="radio" id="12" value="2" name="quarterlist_12" onClick="right_click(this.id)" required></td><td>in Woche <b>13</b></td></tr>
  <tr><td>wird in Woche <b>1</b> beginnen und wird (nach) Woche <b>13</b> enden</td>
    <td><input type="radio" id="13" value="1" name="quarterlist_13" onClick="left_click(this.id)" required></td>
    <td><input type="radio" id="13" value="2" name="quarterlist_13" onClick="right_click(this.id)" required></td>
    <td>in Woche <b>13</b></td></tr>

</table>
<br><br>

<script type="text/javascript">
function left_click(clicked_id){
    var varId = parseInt(clicked_id, 10);
    i = 0;
    while(i < varId){
        var but = [':radio[id=',i,'][value=2]'];
        var but = but.join("");
        $(but).prop('checked',true);
        i++;
    }
    i = varId;
    while(i < 14){
        var but = [':radio[id=',i,'][value=1]'];
        var but = but.join("");
        $(but).prop('checked',true);
        i++;
    }
}
function right_click(clicked_id){
    var varId = parseInt(clicked_id, 10);
    i = 0;
    j = varId++;
    while(i < j){
        var but = [':radio[id=',i,'][value=2]'];
        var but = but.join("");
        $(but).prop('checked',true);
        i++;
    }
    i = varId++;
    while(i < 14){
        var but = [':radio[id=',i,'][value=1]'];
        var but = but.join("");
        $(but).prop('checked',true);
        i++;
    }
}
</script>

当勾选一个二进制单选按钮列表时，勾选所有后续内容

1 个答案: