text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 取得資料範例</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<input type="text" id="textInput" value="Hello, World!">
<button id="getTextBtn">取得文字框的值</button>
<script>
$(document).ready(function(){
$('#getTextBtn').click(function(){
var textValue = $('#textInput').val();
alert('文字框的值是：' + textValue);
});
});
</script>
</body>
</html>
textarea
<!-- 在上面的 HTML 檔案中加入以下程式碼 -->
<select id="selectOption">
<option value="option1">選項1</option>
<option value="option2" selected>選項2</option>
<option value="option3">選項3</option>
</select>
<button id="getSelectBtn">取得選擇框的值</button>
<script>
$(document).ready(function(){
$('#getSelectBtn').click(function(){
var selectedOption = $('#selectOption').val();
alert('選擇的值是：' + selectedOption);
});
});
</script>
select
<!-- 在上面的 HTML 檔案中加入以下程式碼 -->
<select id="selectOption">
<option value="option1">選項1</option>
<option value="option2" selected>選項2</option>
<option value="option3">選項3</option>
</select>
<button id="getSelectBtn">取得選擇框的值</button>
<script>
$(document).ready(function(){
$('#getSelectBtn').click(function(){
var selectedOption = $('#selectOption').val();
alert('選擇的值是：' + selectedOption);
});
});
</script>
<!-- 在上面的 HTML 檔案中加入以下程式碼 -->
<input type="radio" name="gender" value="male" id="maleRadio"> 男
<input type="radio" name="gender" value="female" id="femaleRadio"> 女
<button id="getRadioBtn">取得單選按鈕的值</button>
<script>
$(document).ready(function(){
$('#getRadioBtn').click(function(){
var selectedGender = $('input[name="gender"]:checked').val();
alert('選擇的性別是：' + selectedGender);
});
});
</script>
<!-- 在上面的 HTML 檔案中加入以下程式碼 -->
<input type="checkbox" id="checkbox1" value="value1"> 選項1
<input type="checkbox" id="checkbox2" value="value2" checked> 選項2
<button id="getCheckboxBtn">取得複選框的值</button>
<script>
$(document).ready(function(){
$('#getCheckboxBtn').click(function(){
var checkboxValues = [];
$('input[type="checkbox"]:checked').each(function(){
checkboxValues.push($(this).val());
});
alert('選擇的複選框值是：' + checkboxValues.join(', '));
var isChecked = $("#checkbox2").is(":checked");
if (isChecked)
{
//有選取
}
else
{
//未選取
}
});
});
</script>
留言
張貼留言