Преобразование радиокнопки в флажки с JavaScript

-1

Я набор кнопок радио и флажок на странице, как показано нижеПреобразование радиокнопки в флажки с JavaScript

<html> 
<head> 
    <title>Languages</title> 
    <script type="text/javascript"> 

    </script> 
</head> 
<body> 
    <span>What languages do you know?</span> 
    <form action=""> 
    <div id="controlArea"> 
     <input type="radio" name="lanRadio" value="radioRussian"><label for="radioRussian">Russian</label><br /> 
     <input type="radio" name="lanRadio" value="radioEnglish"><label for="radioRussian">English</label><br /> 
     <input type="radio" name="lanRadio" value="radioSpain"><label for="radioRussian">Spain</label><br /> 
     <input type="radio" name="lanRadio" value="radioFrench"><label for="radioRussian">French</label><br /> 
     <input type="checkbox" name="checkIn" value="CheckMore"><label for="CheckMore">More than 1</label><br /> 
    </div> 
    </form> 
</body>

То, что я хочу сделать, это, если пользователь проверяет «Подробнее чем 1 ", все переключатели должны переключаться на флажки, и пользователи должны иметь возможность проверять дополнительные параметры. Если пользователь отключает флажок, все флажки должны возвращаться в набор переключателей. При смене радиообъектов на флажки выбранный переключатель должен быть установлен флажком.

источник

2012-10-23 Ilham

потребность на сегодняшний день нет jquery, нет innerHTML, готовый использовать код ... что-нибудь еще? – Th0rndike

Th0rndike, это все, спасибо. – Ilham

Вы могли бы сделать что-то вроде этого:

function morethan(cbox) { 
    // setup new state 
    var state = "radio"; 
    if (cbox.checked) { 
     state = "checkbox"; 
    } 
    // get all by name and change state 
    var radios = document.getElementsByName('lanRadio'); 
    for (i = 0; i < radios.length; i++) { 
     radios[i].type = state; 
    } 
}

Вам нужно добавить onclick обработчик к вашему флажком:

<input type="checkbox" name="checkIn" onclick="morethan(this)" value="CheckMore">

Example here

источник

2012-10-23 12:07:40 ManseUK

+1 все домашние задания решены – jwaliszko

он работает только в хром. но мне нужно, чтобы это работало во всех современных браузерах, а также неподходящее поведение в хроме: если выбраны первый и второй флажки, он применяется ко второму переключателю при обращении к переключателям. Фактически он должен применяться к первому выбранному флажку. * * – Ilham

@ пользователь1271160 не уверен, что такое проблемы с перекрестным браузером .. он работает для меня в Firefox и Chrome - возможно, вы можете предоставить дополнительную информацию? – ManseUK

Попробуйте это. Просто скопировать и вставить мой код

 <html> 
    <head> 
     <title>Languages</title> 
     <script type="text/javascript"> 
    if(document.getElementById("radio1").type=="radio") 
     { 
     document.getElementById("radio1").type="checkbox"; 
     document.getElementById("radio2").type="checkbox"; 
     document.getElementById("radio3").type="checkbox"; 
     document.getElementById("radio4").type="checkbox"; 
     } 
     else 
     { 
     document.getElementById("radio1").type="radio"; 
     document.getElementById("radio2").type="radio"; 
     document.getElementById("radio3").type="radio"; 
     document.getElementById("radio4").type="radio"; 
     } 
     </script> 
    </head> 
    <body> 
     <span>What languages do you know?</span> 
     <form action=""> 
     <div id="controlArea"> 
      <input type="radio" id="radio1" name="lanRadio" value="radioRussian"><label for="radioRussian">Russian</label><br /> 
      <input type="radio" id="radio2" name="lanRadio" value="radioEnglish"><label for="radioRussian">English</label><br /> 
      <input type="radio" id="radio3" name="lanRadio" value="radioSpain"><label for="radioRussian">Spain</label><br /> 
      <input type="radio" id="radio4" name="lanRadio" value="radioFrench"><label for="radioRussian">French</label><br /> 
      <input type="checkbox" name="checkIn" value="CheckMore" onchange="fnc()"><label for="CheckMore">More than 1</label><br /> 
     </div> 
     </form> 
    </body>

источник

2012-10-23 12:05:44 polin

не сработал. я проверил флажок, и ничего не изменилось. :-(Может быть, чего-то не хватает. Я не знаю – Ilham

Это может затеряться в теге html. Но он отлично работает в моем локальном и более удобном коде, чтобы понять – polin

Преобразование радиокнопки в флажки с JavaScript

ответ

Смежные вопросы