jquery/js：ラジオボタンをクリック可能にできません

Question

私はちょっとした初心者の問題があり、DIVのクリック可能なボタンの中にボタンを作ることはできません。

完全に機能する5行のトップラインがあります。クリックすると2番目の行が表示されますが、それをクリックすることはできません。何故ですか？

これはリンクです：https://jsfiddle.net/yello/1me8naee/

コード：

 $(document).ready(function() { 
 
       $('#div1,#div2,#div3').hide(); 
 
       $('#mod-7').click(function() { 
 
        $('#div1').show('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-7p').click(function() { 
 
        $('#div1').show('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-6s').click(function() { 
 
        $('#div1').hide('fast'); 
 
        $('#div2').show('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-6p').click(function() { 
 
        $('#div1').show('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-se').click(function() { 
 
        $('#div1').hide('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').show('fast'); 
 
       }); 
 
       });

.segmented { 
 
    padding: 12px; 
 
} 
 

 
.segmented input[type=radio] { 
 
    display: none; 
 
} 
 

 
.segmented label { 
 
    border: outset 1px silver; 
 
    padding: 2px 16px; 
 
    margin-right: -5px; 
 
    background: #ddd; 
 
    cursor: pointer; 
 
} 
 

 
.segmented input:checked + label { 
 
    border: inset 1px silver; 
 
    background: #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="segmented"> 
 
    <input type="radio" name="mod-1" value="Organisation" id="mod-7"> 
 
    <label for="mod-7">iPhone 7</label> 
 

 
    <input type="radio" name="mod-1" value="Users" id="mod-7p"> 
 
    <label for="mod-7p">iPhone 7 Plus</label> 
 

 
    <input type="radio" name="mod-1" value="Units" id="mod-6s"> 
 
    <label for="mod-6s">iPhone 6s</label> 
 

 
    <input type="radio" name="mod-1" value="Tags" id="mod-6sp"> 
 
    <label for="mod-6sp">iPhone 6s Plus</label> 
 

 
    <input type="radio" name="mod-1" value="Tags2" id="mod-se"> 
 
    <label for="mod-se">iPhone SE</label> 
 

 

 
    <div align="center" style="padding:25px;width: 300px;"> 
 

 
    <div id="div1"> 
 
     <input type="radio" name="mem" id="32" value="32"> 
 
     <label for="mem">32Gb</label> 
 
     <input type="radio" name="mem" id="128" value="128"> 
 
     <label for="mem">128Gb</label> 
 
     <input type="radio" name="mem" id="256" value="256"> 
 
     <label for="mem">256Gb</label> 
 
    </div> 
 

 
    <div id="div2"> 
 
     <input type="radio" name="mem" id="32" value="32"> 
 
     <label for="mem">32Gb</label> 
 
     <input type="radio" name="mem" id="128" value="128"> 
 
     <label for="mem">128Gb</label> 
 
    </div> 
 

 
    <div id="div3"> 
 
     <input type="radio" name="mem" id="32" value="32"> 
 
     <label for="mem">32Gb</label> 
 
     <input type="radio" name="mem" id="64" value="64"> 
 
     <label for="mem">64Gb</label> 
 
    </div> 
 

 
    </div> 
 

 
</nav>

Answer 1

あなたのコードが完全に正常に動作しています。ラベルにIDを追加するだけで済みます。

例：

<div id="div1"> 
     <input type="radio" name="mem" id="32" value="32"> 
     <label for="32">32Gb</label> 
     <input type="radio" name="mem" id="128" value="128"> 
     <label for="128">128Gb</label> 
     <input type="radio" name="mem" id="256" value="256"> 
     <label for="256">256Gb</label> 
    </div> 

https://jsfiddle.net/1me8naee/12/

また、あなたがそうでなければ、あなたが持っているfor="mem3-64"で32 iphone 6と32 iphone 7

Answer 2

紛争などがあるでしょう、それぞれのモデルに固有のIDを持っている必要があります下のようなラジオボタンのidを与える。あなたが表示されている2行目のクリック時に何を期待

 $(document).ready(function() { 
 
       $('#div1,#div2,#div3').hide(); 
 
       $('#mod-7').click(function() { 
 
        $('#div1').show('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-7p').click(function() { 
 
        $('#div1').show('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-6s').click(function() { 
 
        $('#div1').hide('fast'); 
 
        $('#div2').show('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-6p').click(function() { 
 
        $('#div1').show('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').hide('fast'); 
 
       }); 
 
       $('#mod-se').click(function() { 
 
        $('#div1').hide('fast'); 
 
        $('#div2').hide('fast'); 
 
        $('#div3').show('fast'); 
 
       }); 
 
       });

.segmented { 
 
    padding: 12px; 
 
} 
 

 
.segmented input[type=radio] { 
 
    display: none; 
 
} 
 

 
.segmented label { 
 
    border: outset 1px silver; 
 
    padding: 2px 16px; 
 
    margin-right: -5px; 
 
    background: #ddd; 
 
    cursor: pointer; 
 
} 
 

 
.segmented input:checked + label { 
 
    border: inset 1px silver; 
 
    background: #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="segmented"> 
 
    <input type="radio" name="mod-1" value="Organisation" id="mod-7"> 
 
    <label for="mod-7">iPhone 7</label> 
 

 
    <input type="radio" name="mod-1" value="Users" id="mod-7p"> 
 
    <label for="mod-7p">iPhone 7 Plus</label> 
 

 
    <input type="radio" name="mod-1" value="Units" id="mod-6s"> 
 
    <label for="mod-6s">iPhone 6s</label> 
 

 
    <input type="radio" name="mod-1" value="Tags" id="mod-6sp"> 
 
    <label for="mod-6sp">iPhone 6s Plus</label> 
 

 
    <input type="radio" name="mod-1" value="Tags2" id="mod-se"> 
 
    <label for="mod-se">iPhone SE</label> 
 

 

 
    <div align="center" style="padding:25px;width: 300px;"> 
 

 
    <div id="div1"> 
 
     <input type="radio" name="mem" id="mem1-32" value="32"> 
 
     <label for="mem1-32">32Gb</label> 
 
     <input type="radio" name="mem" id="mem1-128" value="128"> 
 
     <label for="mem1-128">128Gb</label> 
 
     <input type="radio" name="mem" id="mem1-256" value="256"> 
 
     <label for="mem1-256">256Gb</label> 
 
    </div> 
 

 
    <div id="div2"> 
 
     <input type="radio" name="mem" id="mem2-32" value="32"> 
 
     <label for="mem2-32">32Gb</label> 
 
     <input type="radio" name="mem" id="mem2-128" value="128"> 
 
     <label for="mem2-128">128Gb</label> 
 
    </div> 
 

 
    <div id="div3"> 
 
     <input type="radio" name="mem" id="mem3-32" value="32"> 
 
     <label for="mem3-32">32Gb</label> 
 
     <input type="radio" name="mem" id="mem3-64" value="64"> 
 
     <label for="mem3-64">64Gb</label> 
 
    </div> 
 

 
    </div> 
 

 
</nav>