javascript - 如果它们设置为“是”，我如何组合两个单选按钮来显示相同​​的元素？

Question

这是我在 jQuery 中所拥有的：

$(document).ready(function(){
    $("input[name='DifficultyObtainingCMELicenseRenewal']").change(function() {
      $("#DifficultyObtainingCME").toggle(this.value == "Yes");
    });
    $("input[name='DifficultyObtainingCMEBoardCertification']").change(function() {
      $("#DifficultyObtainingCME").toggle(this.value == "Yes");
    });
});

这是HTML：

 <tr>
    <th><label>Do you have difficulty obtaining enough CME required for Iowa license renewal?</label></th>
    <td>
        <label><input type="radio" name="DifficultyObtainingCMELicenseRenewal" value="Yes" class="checkbox"/> Yes</label><br />
        <label><input type="radio" name="DifficultyObtainingCMELicenseRenewal" value="No" class="checkbox"/> No</label>
    </td>
  </tr>
  <tr>
    <th><label>Do you have difficulty obtaining enough CME required for your specialty board certification/re-certification?</label></th>
    <td>
        <label><input type="radio" name="DifficultyObtainingCMEBoardCertification" value="Yes" class="checkbox"/> Yes</label><br />
        <label><input type="radio" name="DifficultyObtainingCMEBoardCertification" value="No" class="checkbox"/> No</label>
    </td>
  </tr>
  <tr id="DifficultyObtainingCME" style="display:none">
    <th class="altTH"><label>Please elaborate on the difficulties you are experiencing:</label></th>
    <td class="altTD">
        <cftextarea name="DifficultyObtainingCMEOther" rows="3" cols="20"></cftextarea>
    </td>
  </tr>

因此，现在如果您在其中一个框上按“是”，它会显示额外的字段，但在另一个框上按“否”会使其消失，反之亦然。我该如何做到这一点，只要其中任何一个设置为“是”，它就会保持打开状态？

这是一个链接：http: //jsfiddle.net/madcaesar/hcZXf/

Answer 1

只需确保在更改发生时选中“是”选项：

var thingToToggle = $("#DifficultyObtainingCME");
var allRadios = $('input[type="radio"]');

allRadios.change(function () {
    if (allRadios.filter(function () {
        return this.checked && this.value === 'Yes';
    }).length > 0) {
        thingToToggle.show();
    } else {
        thingToToggle.hide();
    } 
});

http://jsfiddle.net/JptF8/

Answer 2

$('input[type="radio"]').change(function() {
if ($('input[type="radio"][value="Yes"]:checked').length > 0) {
    $("#DifficultyObtainingCME").show();
} else {
    $("#DifficultyObtainingCME").hide();
}
});

Of course, if you add more radio buttons later this will apply to those too. In that case, add a class to the ones you want this apply to (e.g. $('.toggleRadioClass[value="Yes"]:checked')). Not sure what the $("#DifficultyObtainingCME").toggle(this.value == "Yes"); is supposed to do, but my code will actually show and hide the element.

Answer 3

:checked基于yes-radio的存在可见性：

var $radios = $("input[name^='DifficultyObtainingCME']"),
    $toggle = $("#DifficultyObtainingCME");

$radios.on("change", function(){
    $toggle.toggle(!!$radios.filter("[value='Yes']:checked").length);
});

小提琴：http: //jsfiddle.net/8wD8D/3/