JQuery හරහා තෝරාගත් රේඩියෝ බොත්තම දැන ගන්නේ කෙසේද?

මට රේඩියෝ බොත්තම් දෙකක් ඇති අතර තෝරාගත් එකක වටිනාකම පළ කිරීමට අවශ්‍යය. JQuery සමඟ වටිනාකම ලබා ගන්නේ කෙසේද?

මට ඒ සියල්ල මේ ආකාරයෙන් ලබා ගත හැකිය:

$("form :radio")

තෝරාගෙන ඇත්තේ කවරෙක් දැයි මා දැන ගන්නේ කෙසේද?

හැඳුනුම්පතක් සහිත පෝරමයක තෝරාගත් radioName අයිතමයේ වටිනාකම ලබා ගැනීම සඳහා 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[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()

ආදානය වටා භාවිතා කර ඇති "" සටහන් කරන්න: පරීක්ෂා කර ඇති අතර පීටර් ජේගේ විසඳුම මෙන් නොවේ

ඔබට රේඩියෝ තේරීම් යන්ත්‍රය සමඟ: පරීක්ෂා කළ තේරීම් කාරකය භාවිතා කළ හැකිය.

 $("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 හැඳුනුම්පත කෙරෙන radiobutton_id ආකෘතිය හා හැඳුනුම්පත ඇත form_id .

වග බලා ගන්න භාවිතා කිරීම විය නාමය වෙනුවට id jQuery මෙම උපලක්ෂණ භාවිතා නිසා, සදහන් කර ඇති පරිදි, ( නම පාලනය හැඳුනුම්පත මතකයට නංවන JSF විසින් ස්වයංක්රීයව ඇත).

එසේම, පරිශීලකයා කිසිවක් තෝරා නොගන්නේ දැයි පරීක්ෂා කරන්න.

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);

ඇඩින් සක්‍රීය කිරීම සඳහා කේතය ඕනෑම තැනක තබන්න. ඉන්පසු විනෝද වන්න! එය කිසිවක් කඩ නොකර පෙරනිමි අගය ශ්‍රිතය අභිබවා යයි.

එය ක්‍රියාවට නැංවීමට ඔබට මෙම 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.

සඳහා API :checked Selector

පංතියක් භාවිතා කරන තෝරාගත් ගුවන්විදුලියේ වටිනාකම ලබා ගැනීම සඳහා:

$('.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();

ඩෙමෝ : 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"
}

ජාවාස්ක්‍රිප්ට් අරාවෙහි ඇති සියලුම රේඩියෝ බොත්තම් අගයන් ලබා ගැනීමට පහත 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ක්ලික් කිරීමේ සිදුවීමෙන් පසුව යාවත්කාලීන නොවීමයි .

ටීඑල්; ඩී.ආර්

$('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>

මට කළ යුතුව තිබුණේ C # කේතය සරල කිරීමයි, එය ඉදිරිපස අන්තයේ ජාවාස්ක්‍රිප්ට් හි හැකි තරම් කරන්න. මම ඩීඑල්එන් හි වැඩ කරන නිසා එයට ක්ෂේත්‍ර ආකෘතියක් භාවිතා කරමි. එබැවින් මට පෝරමයක් එක් කළ නොහැක.

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 සේවාදායකයේ කොටස් සෙවීමක් ආරම්භ කිරීමට අවශ්‍ය දේ මධ්‍යම මට්ටමේ කේතයට යොමු කිරීමයි.

මේ ආකාරයෙන් මට මීට පෙර වඩාත් සංකීර්ණ C # කේතය පිටපත් කිරීමට අවශ්‍ය නැත. බර ඉසිලීම මෙහි සිදු කෙරේ.

මට මේ සඳහා මඳක් බැලීමට සිදු වූ අතර පසුව එය වැඩ කිරීමට ටින්කර් කරන්න. එබැවින් අනෙකුත් DNNers සඳහා, මෙය පහසුවෙන් සොයාගත හැකිය.