Мониторинг значения радиокнопок с помощью JQuery

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)? На данный момент я использую следующий код для инициализации значений и скрытия и отображения вещей, но я думаю, что есть ненужное дублирование кода, которого можно избежать.

$(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 
     }