ฉันมีปุ่มตัวเลือกสองปุ่มและต้องการโพสต์ค่าของปุ่มที่เลือก ฉันจะรับค่าด้วย jQuery ได้อย่างไร
ฉันสามารถรับพวกเขาทั้งหมดเช่นนี้:
$("form :radio")
ฉันจะรู้ได้อย่างไรว่าอันไหนถูกเลือก?
ฉันมีปุ่มตัวเลือกสองปุ่มและต้องการโพสต์ค่าของปุ่มที่เลือก ฉันจะรับค่าด้วย jQuery ได้อย่างไร
ฉันสามารถรับพวกเขาทั้งหมดเช่นนี้:
$("form :radio")
ฉันจะรู้ได้อย่างไรว่าอันไหนถูกเลือก?
คำตอบ:
วิธีรับค่าไอเท็มที่เลือก radioName
ของฟอร์มที่มี id myForm
:
$('input[name=radioName]:checked', '#myForm').val()
นี่คือตัวอย่าง:
$('#myForm input').on('change', function() {
alert($('input[name=radioName]:checked', '#myForm').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
'#myform input[name=radioName]:checked'
?
ใช้สิ่งนี้ ..
$("#myform input[type='radio']:checked").val();
$("#myform").find("input[type='radio']:checked").val();
หากคุณมีการอ้างอิงไปยังกลุ่มปุ่มตัวเลือกตัวอย่างเช่น:
var myRadio = $("input[name=myRadio]");
ใช้ฟังก์ชั่นไม่ได้filter()
find()
( find()
สำหรับการค้นหาองค์ประกอบเด็ก / ผู้สืบทอดในขณะที่filter()
ค้นหาองค์ประกอบระดับบนสุดในการเลือกของคุณ)
var checkedValue = myRadio.filter(":checked").val();
หมายเหตุ:คำตอบนี้เดิมแก้ไขคำตอบอื่นที่แนะนำให้ใช้find()
ซึ่งดูเหมือนว่าจะมีการเปลี่ยนแปลงตั้งแต่ find()
อาจยังมีประโยชน์สำหรับสถานการณ์ที่คุณมีการอ้างอิงถึงองค์ประกอบคอนเทนเนอร์แล้ว แต่ไม่สามารถใช้ปุ่มตัวเลือกได้เช่น:
var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
สิ่งนี้น่าจะใช้ได้:
$("input[name='radioName']:checked").val()
หมายเหตุ "" ใช้ประโยชน์จากอินพุต: ตรวจสอบและไม่เหมือนกับโซลูชันของ Peter J
คุณสามารถใช้: ตัวเลือกที่เลือกพร้อมกับตัวเลือกวิทยุ
$("form:radio:checked").val();
ถ้าคุณต้องการเพียงค่าบูลีนเช่นถ้ามันถูกตรวจสอบหรือไม่ลองนี้:
$("#Myradio").is(":checked")
รับวิทยุทั้งหมด:
var radios = jQuery("input[type='radio']");
กรองเพื่อรับการตรวจสอบ
radios.filter(":checked")
ตัวเลือกอื่นคือ:
$('input[name=radioName]:checked').val()
$("input:radio:checked").val();
นี่คือวิธีที่ฉันจะเขียนแบบฟอร์มและจัดการรับสัญญาณวิทยุที่ถูกตรวจสอบ
ใช้แบบฟอร์มที่เรียกว่า myForm:
<form id='myForm'>
<input type='radio' name='radio1' class='radio1' value='val1' />
<input type='radio' name='radio1' class='radio1' value='val2' />
...
</form>
รับค่าจากแบบฟอร์ม:
$('#myForm .radio1:checked').val();
หากคุณไม่ได้โพสต์แบบฟอร์มฉันจะทำให้มันง่ายขึ้นโดยใช้:
<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />
จากนั้นรับค่าการตรวจสอบกลายเป็น:
$('.radio1:checked').val();
การมีชื่อคลาสบนอินพุตช่วยให้ฉันจัดรูปแบบอินพุตได้อย่างง่ายดาย ...
ในกรณีของฉันฉันมีปุ่มตัวเลือกสองปุ่มในรูปแบบเดียวและฉันต้องการทราบสถานะของแต่ละปุ่ม ด้านล่างนี้ใช้งานได้สำหรับฉัน:
// get radio buttons value
console.log( "radio1: " + $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " + $('input[id=radio2]:checked', '#toggle-form').val() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
</div>
</form>
ในปุ่มตัวเลือกJSF ที่สร้างขึ้น (โดยใช้<h:selectOneRadio>
แท็ก) คุณสามารถทำได้:
radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();
ที่ selectOneRadio ID เป็นradiobutton_idและรูปแบบ ID เป็นform_id
ตรวจสอบให้แน่ใจว่าใช้ชื่อแทนidตามที่ระบุเนื่องจาก jQuery ใช้คุณลักษณะนี้ ( ชื่อถูกสร้างขึ้นโดยอัตโนมัติโดย IDF ที่คล้ายกับรหัสควบคุม)
ตรวจสอบด้วยว่าผู้ใช้ไม่ได้เลือกอะไร
var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {
radioanswer = $('input[name=myRadio]:checked').val();
}
ฉันเขียนปลั๊กอิน jQuery เพื่อตั้งค่าและรับค่าปุ่มตัวเลือก นอกจากนี้ยังเคารพกิจกรรม "เปลี่ยน" ในพวกเขา
(function ($) {
function changeRadioButton(element, value) {
var name = $(element).attr("name");
$("[type=radio][name=" + name + "]:checked").removeAttr("checked");
$("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
$("[type=radio][name=" + name + "]:checked").change();
}
function getRadioButton(element) {
var name = $(element).attr("name");
return $("[type=radio][name=" + name + "]:checked").attr("value");
}
var originalVal = $.fn.val;
$.fn.val = function(value) {
//is it a radio button? treat it differently.
if($(this).is("[type=radio]")) {
if (typeof value != 'undefined') {
//setter
changeRadioButton(this, value);
return $(this);
} else {
//getter
return getRadioButton(this);
}
} else {
//it wasn't a radio button - let's call the default val function.
if (typeof value != 'undefined') {
return originalVal.call(this, value);
} else {
return originalVal.call(this);
}
}
};
})(jQuery);
ใส่รหัสได้ทุกที่เพื่อเปิดใช้งาน Addin จากนั้นสนุกได้เลย! มันแค่แทนที่ฟังก์ชั่นเริ่มต้นโดยไม่ทำลายอะไรเลย
คุณสามารถเยี่ยมชม jsFiddle นี้เพื่อทดลองใช้งานและดูว่ามันทำงานอย่างไร
หากคุณมีปุ่มตัวเลือกหลายตัวในรูปแบบเดียวแล้ว
var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();
var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();
มันใช้งานได้สำหรับฉัน
$(".Stat").click(function () {
var rdbVal1 = $("input[name$=S]:checked").val();
}
ใช้งานได้ดี
$('input[type="radio"][class="className"]:checked').val()
:checked
เลือกทำงานสำหรับcheckboxes
, radio buttons
และเลือกองค์ประกอบ สำหรับองค์ประกอบที่เลือกเท่านั้นให้ใช้:selected
ตัวเลือก
ในการรับค่าวิทยุที่เลือกซึ่งใช้คลาส:
$('.class:checked').val()
ฉันใช้สคริปต์ง่ายๆนี้
$('input[name="myRadio"]').on('change', function() {
var radioValue = $('input[name="myRadio"]:checked').val();
alert(radioValue);
});
ใช้สิ่งนี้:
value = $('input[name=button-name]:checked').val();
DEMO : https://jsfiddle.net/ipsjolly/xygr065w/
$(function(){
$("#submit").click(function(){
alert($('input:radio:checked').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Sales Promotion</td>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
<button id="submit">submit</button>
หากคุณมีปุ่มตัวเลือกเพียง 1 ชุดใน 1 รูปแบบรหัส jQuery นั้นเรียบง่ายเช่นนี้:
$( "input:checked" ).val()
ฉันได้เปิดห้องสมุดเพื่อช่วยในเรื่องนี้แล้ว ดึงค่าอินพุตที่เป็นไปได้ทั้งหมดจริง ๆ แล้วรวมถึงปุ่มตัวเลือกที่ถูกเลือก คุณสามารถตรวจสอบได้ที่https://github.com/mazondo/formalizedata
มันจะให้วัตถุ js ของคำตอบดังนั้นรูปแบบเช่น:
<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>
จะให้คุณ:
$("form").formalizeData()
{
"favorite-color" : "blue"
}
ในการดึงค่าปุ่มตัวเลือกทั้งหมดในอาร์เรย์ JavaScript ให้ใช้รหัส jQuery ต่อไปนี้:
var values = jQuery('input:checkbox:checked.group1').map(function () {
return this.value;
}).get();
ลองมัน-
var radioVal = $("#myform").find("input[type='radio']:checked").val();
console.log(radioVal);
JQuery เพื่อรับปุ่มตัวเลือกทั้งหมดในแบบฟอร์มและค่าที่เลือก
$.each($("input[type='radio']").filter(":checked"), function () {
console.log("Name:" + this.name);
console.log("Value:" + $(this).val());
});
อีกวิธีในการรับ:
$("#myForm input[type=radio]").on("change",function(){
if(this.checked) {
alert(this.value);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<span><input type="radio" name="q12_3" value="1">1</span><br>
<span><input type="radio" name="q12_3" value="2">2</span>
</form>
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
var radValue= "";
$(this).find('input[type=radio]:checked').each(function () {
radValue= $(this).val();
});
})
});
จากคำถามนี้ฉันพบวิธีอื่นในการเข้าถึงรายการที่เลือกในปัจจุบันinput
เมื่อคุณอยู่ในclick
เหตุการณ์สำหรับป้ายกำกับที่เกี่ยวข้อง เหตุผลที่เป็นเพราะสิ่งที่เลือกใหม่input
ไม่ได้รับการปรับปรุงจนกระทั่งหลังจากlabel
เหตุการณ์การคลิกของมัน
TL; DR
$('label').click(function() {
var selected = $('#' + $(this).attr('for')).val();
...
});
สิ่งที่ฉันต้องทำคือลดความซับซ้อนของรหัส C # นั่นคือทำได้มากที่สุดในส่วนหน้าของ JavaScript ฉันใช้คอนเทนเนอร์ fieldset เพราะฉันทำงานใน DNN และมีรูปแบบของตัวเอง ดังนั้นฉันไม่สามารถเพิ่มแบบฟอร์ม
ฉันต้องทดสอบว่ามีการใช้ช่องข้อความใดใน 3 กล่องและหากเป็นเช่นนั้นการค้นหาประเภทใด เริ่มต้นด้วยค่าประกอบด้วยค่าการจับคู่แบบตรงทั้งหมดของค่า
HTML:
<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
<label for="txtPartNumber">Part Number:</label>
<input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
<label for="radPNStartsWith">Starts With: </label>
<input type="radio" id="radPNStartsWith" name="partNumber" checked value="StartsWith"/>
</div>
<div class="form-group">
<label for="radPNContains">Contains: </label>
<input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
<label for="radPNExactMatch">Exact Match: </label>
<input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>
และจาวาสคริปต์ของฉันคือ:
alert($('input[name=partNumber]:checked', '#fsPartNum').val());
if(txtPartNumber.val() !== ''){
message = 'Customer Part Number';
}
else if(txtCommercialPartNumber.val() !== ''){
}
else if(txtDescription.val() !== ''){
}
เพียงแค่บอกว่าแท็กใด ๆ ที่มี ID สามารถใช้งานได้ สำหรับ DNNers นี่เป็นการดีที่จะรู้ เป้าหมายสุดท้ายที่นี่คือส่งผ่านไปยังรหัสระดับกลางสิ่งที่จำเป็นในการเริ่มการค้นหาชิ้นส่วนใน SQL Server
วิธีนี้ฉันไม่ต้องคัดลอกรหัส C # ที่ซับซ้อนมากขึ้นเช่นกัน การยกที่หนักกำลังทำที่นี่
ฉันต้องมองหาสิ่งนี้จากนั้นคนจรจัดกับมันเพื่อให้มันทำงานได้ ดังนั้นสำหรับ DNNers อื่น ๆ หวังว่านี่จะหาง่าย