Question

我有两个组有radio按钮。它的作用是，当选择上面的包时，下面选择的包应该与上面相同，反之亦然。例如，如果我在第一个中选择“Deluxe”，另一个也应该是“Deluxe”。问题是，当我选择顶部的“Deluxe”时，另一个包仍然在之前的选择上。一开始尝试，一切正常，但是当你再次尝试选择时，就会出现问题。另外，我想突出显示所选的包。代码的另一部分是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/

Answer 2

对于jQuery 1.9或更高版本，您需要使用.prop("checked", true)代替.atrr()

突出显示创建一个CSS类并使用.toogleClass

更改它

Answer 3

您可以使用jQuery的启动选择器来缩小代码，使用id以tscbx或tcbx开头的单选按钮，如下所示，并获取索引id找到相应的单选按钮。

您需要使用.prop()代替.attr()

另外，要设置背景颜色，可以将data-col属性放在单选按钮中并使用相同的方法查找col并设置其背景颜色（尽管它在JSFiddle中不起作用）。

<input type="radio" name="radiog_dark" 
       checked value="49.00" id="tcbx1" 
       class="css-checkbox" data-col="colC"/>

jQuery的： -

$('input[type="radio"][id^="tscbx"]').click(function() {  
    var index = $(this).attr('id').replace('tscbx','');
   $('#tcbx'+index).prop('checked', true);    
});

$('input[type="radio"][id^=tcbx]').click(function() {  
    var index = $(this).attr('id').replace('tcbx','');
    $('#tscbx'+index).prop('checked', true);

    //remove all colgroup background
    $('colgroup col').css('background-color','white');
    //put selected bacground for selected radio
    var colId= $(this).data('col');
    var varColor = "rgba(0,140,203,.2)";
    $('#'+colId).css('background-color',varColor);
});

<强> JSFiddle Demo

Answer 4

$('#tscbx3').attr('checked','true')

jquery无法用于单选按钮

4 个答案: