javascript - with - if checked checkbox in jquery




كيف يمكنني معرفة زر الاختيار المحدد عبر jQuery؟ (20)

لديّ زران للراديو وأريد نشر قيمة المختار. كيف يمكنني الحصول على القيمة باستخدام jQuery؟

يمكنني الحصول على كل منهم على هذا النحو:

$("form :radio")

كيف أعرف أي واحد يتم تحديده؟


أنا استخدم هذا البرنامج النصي البسيط

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

إذا كان لديك أزرار راديو متعددة في شكل واحد ثم

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

هذا العمل بالنسبة لي.


إذا كان لديك مجموعة واحدة فقط من أزرار الاختيار في نموذج واحد ، فإن رمز jQuery بسيط مثل:

$( "input:checked" ).val()

إذا كنت تريد فقط القيمة المنطقية ، أي إذا كانت محددة أو لا تحاول ذلك:

$("#Myradio").is(":checked")

استخدم هذا..

$("#myform input[type='radio']:checked").val();

استخدم هذا:

value = $('input[name=button-name]:checked').val();

تحتاج إلى الوصول باستخدام :checked محدد الاختيار:

تحقق من هذا المستند:

على سبيل المثال:

$('input[name=radioName]:checked', '#myForm').val()
$('#myForm input').on('change', function() {
	$('#val').text($('input[name=radioName]:checked', '#myForm').val());
});
#val {
  color: #EB0054;
  font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Radio value: <span id='val'><span></h3>
<form id="myForm">
  <input type="radio" name="radioName" value="a"> a <br>
  <input type="radio" name="radioName" value="b"> b <br>
  <input type="radio" name="radioName" value="c"> c <br>
</form>


تحقق أيضًا مما إذا كان المستخدم لا يختار أي شيء.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

خيار آخر هو:

$('input[name=radioName]:checked').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>


في زر راديو JSF الذي تم إنشاؤه (باستخدام علامة <h:selectOneRadio> ) ، يمكنك القيام بذلك:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

حيث معرف selectOneRadio هو radiobutton_id ومعرف النموذج form_id .

تأكد من استخدام معرف الاسم بدلاً من ذلك ، كما هو محدد ، لأن jQuery يستخدم هذه السمة (يتم إنشاء الاسم تلقائيًا بواسطة JSF يشبه معرف التحكم).


كتبت المساعد 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);

ضع التعليمات البرمجية في أي مكان لتمكين الإضافة. ثم إستمتع! انها مجرد تجاوز وظيفة فال الافتراضي دون كسر أي شيء.

يمكنك زيارة هذا jsFiddle لتجربتها في العمل ، ومعرفة كيفية عملها.

Fiddle


لقد أصدرت مكتبة للمساعدة في هذا. يسحب جميع قيم الإدخال الممكنة ، في الواقع ، ولكن يشمل أيضًا زر الاختيار الذي تم تحديده. يمكنك التحقق من ذلك في https://github.com/mazondo/formalizedata

سوف يعطيك كائن شبيبة من الأجوبة ، لذلك شكل مثل:

<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"
}

للحصول على قيمة الراديو المحدد الذي يستخدم فئة:

$('.class:checked').val()

ما احتجت القيام به هو تبسيط C # code ، وهو القيام بأكبر قدر ممكن في الواجهة الأمامية JavaScript. أنا أستخدم حاوية مجموعة حقول لأنني أعمل في 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() !== ''){

    }

يمكن استخدام أي علامة تحتوي على معرف فقط. بالنسبة لـ DNNers ، من المفيد معرفة ذلك. الهدف النهائي هنا هو تمرير رمز المستوى المتوسط ​​ما هو مطلوب لبدء البحث عن أجزاء في SQL Server.

بهذه الطريقة لا يتعين علي نسخ شفرة C # السابقة الأكثر تعقيدًا أيضًا. يتم الرفع الثقيل هنا.

اضطررت للنظر قليلا لهذا ، ثم العبث به لجعله يعمل. لذا بالنسبة لـ DNNers الآخرين ، نأمل أن يكون العثور عليه سهلاً.


من هذا السؤال ، توصلت إلى طريقة بديلة للوصول إلى input المحدد حاليًا عندما تكون ضمن حدث click للتصنيف الخاص به. والسبب في ذلك هو أن input المحددة حديثًا لم يتم تحديثها حتى بعد حدث النقر الخاص بها.

TL، DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});
input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>


يجب أن يعمل هذا:

$("input[name='radioName']:checked").val()

لاحظ أن "" تم استخدامه حول الإدخال: محدد وليس "مثل حل Peter J


يمكنك استخدام: محدد الاختيار مع محدد الراديو.

 $("form:radio:checked").val();

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

$("input:radio:checked").val();




radio-button