jquery抓取網頁內容 jQuery獲取所選單選按鈕的值




jquery抓取網頁內容 (17)

首先,你不能有多個具有相同ID的元素。 我知道你說過你無法控製表單是如何創建的,但是...試著以某種方式刪除收音機中的所有ID,或者使它們變得獨一無二。

要獲取所選單選按鈕的值,請使用:checked過濾器按名稱選擇它。

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

編輯

所以你無法控制名字。 在這種情況下,我會說這些單選按鈕都放在一個名為radioDiv的div中,然後稍微修改一下選擇器:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

問題陳述很簡單。 我需要看看用戶是否已經從收音機組中選擇了一個單選按鈕。 組中的每個單選按鈕共享相同的ID。

問題是我無法控制如何生成表單。 以下是單選按鈕控制代碼的示例代碼:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

除此之外,當選擇一個單選按鈕時,它不會為控件添加一個“checked”屬性,只是檢查文本(我猜只是選中了沒有值的屬性) 。 以下是選定的無線電控制器的外觀

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

任何人都可以幫助我使用jQuery代碼,它可以幫助我獲得選中的單選按鈕的值嗎?


請參閱下面的工作示例,收集各個與不同部分相關的無線電組。 你的命名方案很重要,但理想情況下,你應該嘗試使用一致的命名方案來輸入(尤其是當他們在這裡的部分)。

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>


只需使用。

$('input[name=name_of_your_radiobutton]:checked').val();

它很容易。


if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

解釋這個簡單主題的最好方法是給出簡單的示例和參考鏈接: -

在下面的例子中,我們有兩個單選按鈕。 如果用戶選擇任何單選按鈕,我們將在警告框中顯示選定的單選按鈕值。

HTML:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jQuery的: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

並處理jquery的警報值設置/通過div id更改:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

它很容易....: - }


要獲取所選單選按鈕的值,請使用RadioButtonName和包含RadioButton的表單ID。

$('input[name=radioName]:checked', '#myForm').val()

或僅由

$('form input[type=radio]:checked').val();

<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

這將返回,檢查單選按鈕的值。

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

獲取所有收音機:

var radios = $("input[type='radio']");

篩選以獲得檢查的那個

radios.filter(":checked");

要么

另一種方法可以找到單選按鈕的值

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

獲取所選單選按鈕的最簡單方法如下:

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

在選擇器之間不應該使用空間。


檢查它的工作正常的例子

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();


僅限姓名

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

另一種簡單的理解方式...它的工作原理:

HTML代碼:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Jquery代碼:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

我不是一個JavaScript人,但我在這裡找到這個問題。 對於誰在谷歌,並找到這裡,我希望這有助於一些。 所以,如果我們有一個單選按鈕列表,那麼問題就在這裡:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

我可以找到用這個選擇器選擇哪一個:

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

即使沒有選擇元素,我仍然沒有得到未定義的錯誤。 因此,在獲取元素值之前,您不必額外寫入if語句。

這裡是非常基本的jsfiddle示例


這裡有2個單選按鈕,即rd1和Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

通過檢查個人是否檢查哪個單選按鈕是最簡單的方法(“:checked”)屬性

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

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

用於嵌套屬性

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

不要忘記名稱的單個括號





siebel