Jquery：隐藏带有计数的单选按钮

Question

如何隐藏单选按钮，当它在 jquery 中指定计数时起作用。 我在 html 页面上设计了四个单选按钮。

           <div id="option">
            <input type="radio" id="one" value=1>
            <input type="radio" id="two" value=2>
            <input type="radio" id="three" value=3>
            <input type="radio" id="four" value=4>
            </div>   

如果单选按钮的数量为 2，则显示前两个单选选项。 如果单选按钮的数量为 4，则显示所有四个选项。

var numberOfCheckedRadio = $('input:radio').length;

$(document).ready(function () {
    if ( numberOfCheckedRadio = 2 ) {
       
        $('#one').show();
        $('#two').show();
       }
    else {
        $('#one').show();
        $('#two').show();
        $('#three').show();
        $('#four').show();
      }
    });

Answer 1

你可以试试这个。

var numberOfCheckedRadio = $("input[type='radio']").length;

$(document).ready(function () {
  //hide them all
    $("input[type='radio']").hide();

    if ( numberOfCheckedRadio === 2 ) {
       
        $('#one').show();
        $('#two').show();
    }
    else if(numberOfCheckedRadio === 4) {
        $('#one').show();
        $('#two').show();
        $('#three').show();
        $('#four').show();
      }
   else{
        //do some thing you want with other condition
    }

});

Answer 2

由于您始终显示 1 和 2，因此甚至不要将它们放入if子句中：

$(function () {
    // Just show
    $('#one').show();
    $('#two').show();
    // If there are more than 2 radio buttons
    if ( $('input[type="radio"]').length > 2 ) {
        // Show those
        $('#three').show();
        $('#four').show();
    }
});

正如@Lapskaus 指出的那样，无论如何，您都应该能够将它们全部显示出来，因为如果您的逻辑取决于显示的全部计数，那么您不需要隐藏任何单选按钮，因为听起来您的 PHP 是首先确定计数并首先删除或添加它们。 如果您总共有 4 个但只想显示 2 个，那么情况就不同了，那么您需要一些逻辑，但是在这里，无论哪种方式，您都希望根据呈现到页面的内容显示最大值。 我一开始就不会隐藏它们。

如果在脚本中的这一点之前它们被 JS 隐藏并且您需要 JS 来显示它们，那么只需执行以下操作：

$(function () {
    $('input[type="radio"]').show();
});