JSFiddle - React, Tailwind, and code Playground

attr() v.s. prop()

by Trina Lu

HTML

<input type="checkbox" id="c1" />
<input type="checkbox" id="c2" checked="true" />


<input type="text" id="t" value="default" />

<button id="btn">Check</button>

JavaScript

$("#btn").click(check);

function check() {
  var c1_attr = $('#c1').attr('checked'); //undefined 
  var c1_prop = $('#c1').prop('checked'); //false
  var c2_attr = $('#c2').attr('checked'); //checked 
  var c2_prop = $('#c2').prop('checked'); //true
  var t_attr = $('#t').attr('value'); //default (always)
  var t_prop = $('#t').prop('value'); //change as input value

  console.log(c1_attr, c1_prop);
  console.log(c2_attr, c2_prop);
  console.log(t_attr, t_prop);
}