javascript - jquery 对单选按钮不起作用

Question

我有两个组都有一个 radio 按钮。它的作用是，当选择上面的包时，下面选择的包应该与上面的相同，反之亦然。例如，如果我在第一个中选择“豪华”，另一个也应该是“豪华”。问题是，当我选择顶部的“豪华”时，其他套餐仍在之前的选择中。第一次尝试时，一切正常，但当您再次尝试选择时，问题就出现了。我还想突出显示所选的包。代码的另一部分是here

HTML

<table class="tblPackage">
<thead>
        <tr style="text-align: center;">
            <td width="30%"></td>
            <td width="1%"></td>
            <td width="19%" valign="top">
                <div class="d17_1">
                    <div class="d17_2">ECONOMY</div><span class="s11">$49</span>
                </div>
            </td>
            <td width="19%" valign="top">
                <div class="d17_1">
                    <div class="d17_2">DELUXE</div><span class="s11">$79</span>
                </div>
            </td>
            <td width="19%" valign="top">
                <div class="d17_1">
                    <div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
                </div>
            </td>
        </tr>
    </thead>
    <tbody>
        <colgroup>
            <col id="colA"/>
            <col id="colB"/>
            <col id="colC"/>
            <col id="colD"/>
            <col id="colE"/>
        </colgroup>
                    <tr>
                    <td  style="text-align: left;"><h5>Choose Package</h5></td>
                    <td></td>
                    <td>
                        <center>
                            <input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox" onclick="ChangeColColor(this,'colC')"/>
                            <label for="tcbx1" class="css-label"></label>
                        </center>
                    </td>
                    <td>
                        <center>
                            <input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox" onclick="ChangeColColor(this,'colD')"/>
                            <label for="tcbx2" class="css-label"></label>
                        </center>
                    </td>
                    <td>
                        <center>
                            <input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox" onclick="ChangeColColor(this,'colE')"/>
                            <label for="tcbx3" class="css-label"></label>
                        </center>
                    </td>                       
                    </tr>
    </tbody>
    </table>

<table class="tblsubPackage" width="90%">
    <tr>
        <td width="31%"><h5>Choose Package</h5></td>
        <td width="19%" valign="top">
            <div class="d17_1">
                <div class="d17_2">ECONOMY </div><span class="s11">$49</span>
            </div>
            <center>
                <input type="radio" name="radiog_lit" checked value="49.00" id="tscbx1" class="css-checkbox" />
                <label for="tscbx1" class="css-label"></label>
            </center>
        </td>
        <td width="19%" valign="top">
            <div class="d17_1">
                <div class="d17_2">DELUXE</div><span class="s11">$79</span>
            </div>
            <center>
                <input type="radio" name="radiog_lit" value="79.00" id="tscbx2" class="css-checkbox" />
                <label for="tscbx2" class="css-label"></label>
            </center>
        </td>
        <td width="19%" valign="top">
            <div class="d17_1">
                <div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
            </div>
                <center>
                    <input type="radio" name="radiog_lit" value="149.00" id="tscbx3" class="css-checkbox" />
                    <label for="tscbx3" class="css-label"></label>
                </center>
            </td>
        </tr>
    </table>

Answer 1

用单击事件处理。

$('.tcbx').click(function (event) {
    var test = $(this).data('test');
    $('#'+test).prop('checked', this.checked);
});

只需确保选项中的data 属性与子包的id 属性相匹配，反之亦然

  <input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" 
       class="css-checkbox tcbx" data-test="tscbx1" />
                      //---^^^^ added a class here

并添加一个类。

我知道有很多其他方法可以解决这个问题，其中之一是比较两个表中的索引并进行类似的必要操作。但是为了快速响应，并且由于您已经为所有复选框设置了不同的 ID，我添加了此功能。

这只是一个示例，您可以完全避免使用不同的 id 希望您能继续努力

注意:您可以将 test 更改为您喜欢的任何变量。

给你

http://jsfiddle.net/aohsny6y/20/