Как мне разработать форму-флажок, используя JavaScript и HTML? - PullRequest
Новая
       35

Как мне разработать форму-флажок, используя JavaScript и HTML?

1 голос
/ 18 марта 2020

В настоящее время я разрабатываю форму заказа с JavaScript и HTML, и мне нужно установить флажок для опции "создать свой собственный". После этого мне нужно иметь 6 флажков с различными фруктами на выбор. Буду ли я использовать оператор switch для флажков? Вот что у меня есть:

JavaScript: 

for (var i = 0; i < document.forms[0].optBuildown.length; i++){
    if (document.forms[0].optBuildown[i].checked){
        buildOwn = i;
    }
}

switch(buildOwn){
    case 0:
      strPC = strPC + "<br><br>Build your own";
      break;

}

HTML

<td valign="top">Build your own:</td>
                <td valign="top" nowrap="nowrap">
                    <input type="radio" name="chkOption" value="opt1" onclick="return changeOption()" /> <br />
                    <input type="checkbox" name="chkOption" value="1" onclick="return orderSummary()" />Blueberry
                    <input type="checkbox" name="chkOption" value="2" onclick="return orderSummary()" />Strawberry
                    <input type="checkbox" name="chkOption" value="3" onclick="return orderSummary()" />
                    Banana
        </td>

Я начинающий программист (как вы можете видеть, лол), если вы можете чем-то помочь, это будет с благодарностью.

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Если требование соответствует приведенному ниже

Затем вы можете попробовать следующий код, используя Jquery. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Radio Buttons</title>
<style>
    .custom{
           display: none;
      }
   
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".custom").not(targetBox).hide();
        $(targetBox).show();
    });
});
</script>
</head>
<body>
    <div>
               <label><input type="radio" name="colorRadio" value="custom"> Build your own</label>
      
    </div>
    
  <div class="custom" id="customFruit">
<label><input value="standard" type="checkbox">Grape</label><br/>
<label><input value="standard" type="checkbox">Apple</label><br/>
<label><input value="standard" type="checkbox">Pear</label><br/>
<label><input value="standard" type="checkbox">Orange</label><br/>
<label><input value="standard" type="checkbox">Strawberry</label><br/>
<label><input value="standard" type="checkbox">Mango</label><br/>
<label><input value="standard" type="checkbox">Watermelon</label><br/>
</div> 
    
    
</body>
</html>
0 голосов
/ 18 марта 2020

Ваши требования немного неясны, но я не думаю, что вам нужен оператор switch для достижения функциональности, см. Фрагмент.

Если ваш список флажков 'fruits' является динамическим c, вы можете сконструировать его в функции ToggleFruitSelection 

function ToggleFruitSelection(){
 if(document.querySelector('input[name="formtype"]:checked').value === "custom"){
  document.getElementById('customFruit').classList.remove("hidden");
 }else{
  document.getElementById('customFruit').classList.add("hidden");
 }
}
.hidden{
display:none;
}
<label><input onChange=ToggleFruitSelection() value="standard" type="radio" name="formtype">Standard</label><br/>
<label><input onChange=ToggleFruitSelection() value="custom"  type="radio" name="formtype">Build your own</label><br/>
<hr/>
<div class="hidden" id="customFruit">
<label><input value="standard" type="checkbox">Grape</label><br/>
<label><input value="standard" type="checkbox">Apple</label><br/>
<label><input value="standard" type="checkbox">Pear</label><br/>
<label><input value="standard" type="checkbox">Orange</label><br/>
<label><input value="standard" type="checkbox">Strawberry</label><br/>
<label><input value="standard" type="checkbox">Mango</label><br/>
<label><input value="standard" type="checkbox">Watermelon</label><br/>
</div>
...