Question

假设我有一些像这样的单选按钮

<div id="left_col">
  <p>
    <label>
      <input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
      WSDL</label>
    <label>
      <input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
      Endpoint</label>
  </p>
  <p id="ws_doc">
    <label for="ws_doc">Document:</label>
    <input type="text" name="ws_doc" id="ws_doc_txt">
  </p>
  <p id="ws_end">
    <label for="ws_end">Endpoint:</label>
    <input type="text" name="ws_end" id="ws_end_txt">
  </p>
  <p id="ws_ns">
    <label for="ws_ns">Namespace:</label>
    <input type="text" name="ws_ns" id="ws_ns_txt">
  </p>
  <p>
    <label for="ws_op">Operation:</label>
    <input type="text" name="ws_op" id="ws_op_txt">
  </p>
  <p>
    <label for="ws_par">Parameter:</label>
    <input type="text" name="ws_par" id="ws_par_txt">
  </p>
  <p>
    <label for="ws_val">Value:</label>
    <input type="text" name="ws_val" id="ws_val_txt">
  </p>
    <input type="submit" name="test" value="Test">
</div>

有没有办法让jQuery监视器连续显示单选按钮的值，以便它隐藏并相应地显示输入文本框（如果我在html标记内使用了checked属性，则不仅仅是在更改上而且在页面加载时）？现在我使用以下代码来初始化值并隐藏和显示内容，但我认为可以避免一些不必要的代码重复。

$(document).ready( function() {
    $("*").addClass("ui-corner-all ui-widget");
    $("input[type=submit]").button();
    $("#ws_type_0").prop('checked','checked');
    $("#ws_end").hide();
    $("#ws_ns").hide();
    $("input[name=ws_type]").on('change', function() {
        if($(this).val()=="NOWSDL") {
            $("#ws_end").show();
            $("#ws_ns").show();
            $("#ws_doc").hide();
        }
        else if($(this).val()=="WSDL") {
            $("#ws_end").hide();
            $("#ws_ns").hide();
            $("#ws_doc").show();
        }
});
});

Answer 1

您可以使用带有状态标志的if/else方法来阻止最后的toggle()块。试试这个：

$("*").addClass("ui-corner-all ui-widget");
$("input[type=submit]").button();
$("#ws_type_0").prop('checked', true);
$("#ws_doc").hide();
$("input[name=ws_type]").on('change', function() {
    var isWSDL = this.value == 'WSDL';
    $("#ws_end, #ws_ns").toggle(isWSDL);
    $("#ws_doc").toggle(!isWSDL);
});

Example fiddle

这是否更好，或更具可读性，是开放的意见。

Answer 2

这是我昨天为应用做的事情。它评估它是否是男性。我首先将无线电值存储在localstorage中。

var radios = document.getElementsByName("rd"), found = 1;
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                    myGender.role = radios[i].value;
                    localStorage.setItem("myGender", JSON.stringify(myGender));
                    location.reload();
                    found = 0;
                    break;
                }
            }
            if(found == 1)
            {
            alert("Please select gender!");
            }
    }

然后我解析JSON字符串以获取值。然后将它们分配给变量。

var fullInfo, data, genderInfo, gData, gender;
        genderInfo = localStorage.getItem('myGender'); 
        fullInfo = localStorage.getItem("myObject");

        gData = JSON.parse(genderInfo);
        data = JSON.parse(fullInfo);
        var male = "Male";

        gender = gData.role;
        ageInfo = data.age;
        if (gender === male) {
            //do stuff for males here
        } else {
            //do stuff for females here
        }

使用jQuery监视单选按钮的值

2 个答案: