Несколько кнопок управления переключателями в jQuery mobile - PullRequest
Новая
       11

Несколько кнопок управления переключателями в jQuery mobile

0 голосов
/ 20 ноября 2018

У меня есть приведенный ниже HTML-код 

<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label> 
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label> 
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>

Я хочу, если выбрано choice2 и один из cb-choice1 или cb-choice2, тогда полученное значение равно значению cb -... choice (4или 5) если выбрано choice2, а cb -... не проверено, полученное значение равно 2.

Как я могу это сделать?

Я пытаюсь это 

$("input:checked").each(function(i) {
   if (($(this).attr("radioatrr") == 0)) {
      alert(($(this).attr("value"));
   }
})

, но не могу работать, как я хочу

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Я использую скрытое поле ввода для захвата желаемого значения, вы можете изменить его на что угодно.Я также изменил переключатели на две группы, так как, читая вопрос / требования, я думаю, что так должно быть настроено. 

$("#submit").click(function() {
  //capture group 1 and group 2 value that's checked
  var val1 = $('input[name=choice]:checked').val();
  var val2 = $('input[name=choice2]:checked').val();
  
  //capture the input object with the desired value
  var sendVal = $('input[name=myval]');
  
  //reset value to 0 as this happens on click, incase value gets changed
  sendVal.val(0);
  
  //if group 1 is 2 and there is a value selected in group2
  if(val1==2&&val2 != undefined){
    sendVal.val(val2);
    
  //if group 1 is 2 and group 2 is not selected
  }else if(val1==2&&val2 == undefined){
    sendVal.val(val1);
  }
  
  //showing value to be sent in an alert
  alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label> 
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>

<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label> 
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>

<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>
0 голосов
/ 20 ноября 2018

Вы можете обратиться к этому руководству на W3, чтобы помочь вам: https://www.w3schools.com/jsref/prop_radio_value.asp

Что касается вашей проблемы, вы можете подключить эту функцию: 

function handleRadioSelection() {
    if(document.getElementByName('choice2').checked) {
        if (document.getElementByName('cb-choice1').checked) {
            return document.getElementByName('cb-choice1').value
        } else if (document.getElementByName('cb-choice2').checked) {
            return document.getElementByName('cb-choice2').value
        } else {
            return document.getElementByName('choice2').value
        }
    }
}
...