JSFiddle - React, Tailwind, and code Playground

by dvanauken

HTML

<body>
  <p id="hello">Hello World</p>
  <label><input type="radio" name="t0" value="mco" />MCO</label>
  <label><input type="radio" name="t0" value="mia" />MIA</label>
  <hr />
  <label><input type="radio" name="t1" value="lax" />LAX</label>
  <label><input type="radio" name="t1" value="sfo" />SFO</label>
  <hr />
  <label><input type="radio" name="t2" value="ewr" />EWR</label>
  <label><input type="radio" name="t2" value="jfk" />JFK</label>
  <br />
  <button id="btnTest5">Test5</button>
  <br />
  <button id="btnTest6">Test6</button>
  
  <Br />
  <Br />
  <Br />
  
  <form style="background:silver;" id="test">
    <input type="text" id="test1" value="test1" />
    <br />
    <input type="text" id="test2" value="test2" />
    <br />
    <input type="text" id="test3" value="test3" />
    <br />
    <a href="#" id="btnTest7">Test7A</a>
    <br />
    <a href="#" id="btnTest8">Test8A</a>
  </form>
</body>

JavaScript

$('#btnTest5').on('click', function(){
    $('input[name="t0"][value="mia"]').prop('checked', true);
    $('input[name="t1"][value="sfo"]').prop('checked', true);
    $('input[name="t2"][value="jfk"]').prop('checked', true);

    alert($("input:radio[name ='t0']:checked").val());
    alert($("input:radio[name ='t1']:checked").val());
    alert($("input:radio[name ='t2']:checked").val());
});


$('#btnTest6').on('click', function(){
    var result = $('input[name="task[0][]"]:eq(1)');
    alert($(result).val());
});

$('#btnTest7').on('click', function(e){
    e.preventDefault();
    var element = $("#test").find("#test3").val();
    //or
    //var element1 = $(this).closest("#test").find("#test3").val();
    alert(element);
    //alert(element1);
});

$('#btnTest8').on('click', function(e){
    e.preventDefault();
    var form = $(this).closest("form");
    var value = form.find("#test3").val();
    alert(value);
});